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

داخل

، فيجب تطبيق خاصية المحاذاة العمودية مباشرة على

.

مثال عملي

ضع في اعتبارك كود HTML وCSS التالي:

HTML:

CSS:
#outer {
  الارتفاع: 200 بكسل؛
  محاذاة النص: مركز؛
}

#داخلي {
  العرض: كتلة مضمنة؛
  الارتفاع: 200 بكسل؛
  محاذاة رأسية: وسط؛
}

#الرأس {
  العرض: كتلة مضمنة؛
بشكل بديهي، قد يتوقع المرء أن يتم توسيط العنصر 
 عموديًا داخل عناصر 
. ومع ذلك، هذا ليس هو الحال. لفهم السبب، من المهم أن تتذكر أن المحاذاة الرأسية تحدث على أساس سطر بسطر داخل العنصر الأصلي. لذلك، إذا تجاوز محتوى العنصر 
 سطرًا واحدًا، فلن تتم محاذاة 
 كما هو متوقع.
لتوضيح هذا المفهوم، يمكننا تعديل كود HTML:
 
كما ترون، تم الآن توسيط العنصر 
 عموديًا داخل العنصر الأصلي، حيث تعتمد المحاذاة العمودية على ارتفاع سطر النص.