الارتفاع والمحاذاة العمودية

يجب أن يكون لارتفاع العنصر الأصلي قيمة ثابتة (أي ليست تلقائية أو نسبة مئوية). إذا لم يتم تحديد الارتفاع، فسيقوم المتصفح بحسابه بناءً على المحتوى، مما قد يؤدي إلى نتائج غير متوقعة.

تحديد موضع العناصر المضمنة

خلافًا لمحاذاة النص ، والذي ينطبق على العنصر المحتوي على مستوى الكتلة، يجب تطبيق المحاذاة الرأسية على العنصر المضمن الذي تريد تحديد موضعه.

المتصفح الاختلافات

قد لا تدعم المتصفحات القديمة المحاذاة العمودية بشكل متسق. ومع ذلك، فإن المتصفحات الحديثة تتعامل معها بشكل جيد، حتى عند استخدامها على العناصر غير المضمنة.

مثال: توسيط النص

على سبيل المثال، لنفترض أن لديك HTML التالي:

لتوسيط النص عموديًا في #inner، قم بتطبيق المحاذاة العمودية: من المنتصف إلى #header:
#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
لاحظ أنه في هذا المثال، #inner هو عنصر كتلة مضمّنة بارتفاع ثابت.