كيفية توسيط div بداخل div

خالد العليان · 28 فبراير 2021

أريد أن أعرف كيف أقوم بتوسيط div بداخل div آخر باستخدام Css؟

<div class="a">
  <div class="b">asdasd</div>
</div>

Sam Ahw · 28 فبراير 2021

يوجد العديد من الطرق، وذلك يعتمد على النمط الذي تقوم باستخدامه في العرض Flex أو Grid أو حسب توزع العناصر ضمن الصفحة. ولكن أسهل طريقة في حال لم تكن تستخدم بنية محددة ولسرعة التوسيط يمكنك استخدام margin: auto مثال:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<div style="background-color:yellow">
	
  <div class="center">Hello World!</div>
</div>

</body>
</html>

وستحصل على النتيجة التالية:

وكذلك margin-left: auto و margin-right: auto معاً لنفس العنصر.

أما لتوسيط عنصر نصّي نستخدم text-align مع القيمة center كالتالي:

.center {
  text-align: center;
}

وسيتم توسيط النص ضمن العنصر الحاوي له.

محمد أبو عواد · 28 فبراير 2021

هناك العديد من الطرق لتوسيط div بداخل div, لنستعرض معا البعض منها
الطريقة الأولى: نقوم بإعطاء div الداخلي width معين مثلا 50% ومن ثم نعطيه خاصية margin كما هو موضح في الكود الآتي

.b{
  width: 50%;
  margin: 0 auto;
}

عند اعطاء هذه الخصائص لل div الداخلي سوف يتوسط بداخل div الخارجي وسوف تكون النتيجة بهذا الشكل
الطريقة الثانية: نستخدم خاصية table حيث نعطي عنصر div الداخلي هذه الخصائص

.b{
	display: table;
	margin: 0 auto;
}

سوف تكون النتيجة بهذا الشكلالطريقة الثالثة: سوف نستخدم خاصية flexbox لتوسيط ال div الداخلي بداخل ال div الخارجي, لاحظ لو سمحت الكود الآتي

.a{

    border:1px solid #f00;

    display: flex;

    justify-content: center;//لتوسيط المحتوى

    padding: 20px;

}

لاحظ أعطينا الdiv الخارجي خاصية display: flex; ومن ثم ثم قمنا بتوسيط المحتوى الذي بداخله
سوف تكون النتيجة مشابهة لنتيجة الطريقة الثانية

Abdulhamid Hamsho2 · 28 فبراير 2021

وعليكم السلام ورحمة الله تعالى،

يمكنك ذلك باستخدام الخاصية margin: auto; والتي تقوم بجعل الهامش في جميع الأطراف بشكل متساوي.

يمكنك أيضًا مشاهدة الصورة في الأسفل والتي تشرح بشكل أفضل كيفية استخدام الهامش الخاص بالحاويات.

ويمكنك توسيط الحاوية التي تملك الصنف b داخل الحاوية التي تحوي الصنف a باستخدام هذه الشيفرة:

.b{
  margin: auto;

}

بهذا الشكل تكون قد قمت بتوسيط العنصر الذي تريد بابسط طريقة.

أتمنى لك التوفيق.

خالد العليان · 28 فبراير 2021

شكرا لكم على شرحكم الكافي

عبدالباسط ابراهيم · 28 فبراير 2021

توجد عدة طرق لتوسيط العناصر

أولاً بإستخدام ال flexbox تقوم

.a{
  display: flex;
  justify-content: center;    /* للتوسيط أفقياً */
  align-items: center;       /* للتوسيط رأسياً */
}

بإستخدام ال position

.a{
	position: relative;
}
.b{
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%)
}

أما إذا كان العنصر الذي تريد توسيطه inline تقوم بإعطاء العنصر الأب text-align: center فقط

كيفية توسيط div بداخل div

السؤال

خالد العليان

5 أجوبة على هذا السؤال

Recommended Posts

Sam Ahw

محمد أبو عواد

Abdulhamid Hamsho2

خالد العليان

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية