كيفية تسوية العمودي للعناصر

كيفية تسوية العمودي لأي عنصر

مثال

<style>
.حاوية {
  الارتفاع: 200 بكسل;
  الوضع: نسبي;
  حافة: 3 بكسل ثابتة صلبة خضراء;
}
.مركز-عمودي {
  الحجوم: 0;
  الوضع: مطلق;
  العمود: 50%;
  -ms-تحويل: نقل-ي-عمودي(-50%);
  تحويل: نقل-ي-عمودي(-50%);
}
</style>
<div class="حاوية">
  <div class="مركز-عمودي">
    <p>أنا مركزًا عموديًا.</p>
  </div>
</div>

جربها بنفسك

كيفية تسوية العمودي والأفقي

مثال

<style>
.حاوية {
  الارتفاع: 200 بكسل;
  الوضع: نسبي;
  حافة: 3 بكسل ثابتة صلبة خضراء;
}
.مركز {
  الحجوم: 0;
  الوضع: مطلق;
  العمود: 50%;
  اليسار: 50%;
  -ms-تحويل: نقل(-50%, -50%);
  تحويل: نقل(-50%, -50%);
}
</style>
<div class="حاوية">
  <div class="مركز">
    <p>أنا مركزًا عموديًا وأفقياً.</p>
  </div>
</div>

جربها بنفسك

يمكنك أيضًا استخدام Flexbox لتسويق العناصر إلى المركز:

مثال

.مركز {
  عرض: مرونة;
  تحديد محور العدالة: مركز;
  تحديد محور الأشياء: مركز;
  الارتفاع: 200 بكسل;
  حافة: 3 بكسل ثابتة صلبة خضراء;
}

جربها بنفسك

الصفحات ذات الصلة

تعليمات:تحديد ترتيب CSS

تعليمات:تحويلات CSS

تعليمات:Flexbox CSS