فهم المحاذاة الرأسية لعناصر الكتلة المضمنة

بينما تشير الوثائق إلى أن المحاذاة العمودية تعمل مع عناصر الكتلة المضمنة، إلا أنه قد يكون مربكًا عندما فشل في المحاذاة كما هو متوقع. للتوضيح، دعونا نتعمق أكثر في هذا المفهوم.

نطاق المحاذاة العمودية

على عكس محاذاة النص، التي تضبط محاذاة النص داخل منطقة محتوى العنصر الأصلي، عمودي- align يعمل داخل مربع خط العنصر. مربع الخط هو المنطقة المستطيلة التي تشمل المربعات التي تم إنشاؤها بواسطة عنصر المستوى المضمن في سطر واحد.

مثال:

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

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

المشكلة:
في هذا المثال، إعداد المحاذاة العمودية: الأوسط لا يؤدي إلى توسيط عنصر #content عموديًا داخل #wrapper div.
شرح:
المحاذاة العمودية لا تؤدي إلى محاذاة عنصر الكتلة المضمنة بالنسبة لكتلة الحاوية الخاصة به ولكن داخل مربع السطر الخاص به. نظرًا لأن عنصر #content يحتوي على نص فقط، والذي تم توسيطه عموديًا بالفعل بناءً على المحاذاة الرأسية الافتراضية: الخط الأساسي، فليس له أي تأثير على المحاذاة النهائية.
الاستنتاج: 
 عند العمل مع المحاذاة الرأسية لعناصر الكتلة المضمنة، من الضروري أن نفهم أنها تقوم بمحاذاة المحتوى داخل مربع سطر العنصر، وليس الكتلة التي تحتوي عليه. ضع ذلك في الاعتبار لتحقيق الموضع الرأسي المطلوب في عناصر صفحتك.