CSS/vertical-align

الخاصية vertical-align في CSS تُحدِّد المحاذاة الرأسية للعناصر السطرية أو خلايا الجداول.

/* كلمات محجوزة */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> قيم طولية */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> نسب مئوية */
vertical-align: 20%;

/* القيم العامة */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

يمكن أن تستخدم الخاصية vertical-align استخدامين مختلفين:

• لمحاذاة العناصر السطرية رأسية ضمن الصندوق السطري (line box) الذي تتبع له، فمثلًا يمكن محاذاة صورة <img> رأسيًا في سطرٍ نصي.
• لمحاذاة محتويات خلايا الجداول رأسيًا.

لاحظ أنَّ الخاصية vertical-align تُطبَّق على العناصر السطرية وخلايا الجداول فقط، إذ لا تستطيع استخدامها لمحاذاة العناصر الكتلية (block elements).

القيمة الابتدائية	baseline
تُطبَّق على	العناصر السطرية وخلايا الجداول.
قابلة للوراثة	لا
قابلة للحركة	نعم
القيمة المحسوبة	كما حُدِّدَت، مع تحويل النسب المئوية إلى أطوال مطلقة.

أمثلة

مثال عن محاذاة خلايا الجداول باستخدام القيم baseline و top و middle و bottom مع الخاصية vertical-align:

<table>
  <tr>
    <td class="baseline"><code>baseline</code></td>
    <td class="top"><code>top</code></td>
    <td class="middle"><code>middle</code></td>
    <td class="bottom"><code>bottom</code></td>
    <td>
      <p>سنضع فقرةً طويلةً في هذه الخلية لكي تنقسم إلى عدِّة أسطر لكي يصبح أثر الخاصية vertical-align جليًا.</p>
    </td>
  </tr>
</table>

شيفرة CSS:

table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table, td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

.baseline { vertical-align: baseline; }
.top      { vertical-align: top; }
.middle   { vertical-align: middle; }
.bottom   { vertical-align: bottom; }

مثال عن محاذاة صورة <img> باستخدام القيم text-top و text-bottom و middle:

<div>An <img src="image.png" alt="link" width="32" height="32"> image with a default alignment.</div>
<div>An <img class="top" src="image.png" alt="link" width="32" height="32"> image with a text-top alignment.</div>
<div>An <img class="bottom" src="image.png" alt="link" width="32" height="32"> image with a text-bottom alignment.</div>
<div>An <img class="middle" src="image.png" alt="link" width="32" height="32"> image with a middle alignment.</div>

شيفرة CSS:

.top { vertical-align: text-top; }
.bottom { vertical-align: text-bottom; }
.middle { vertical-align: middle; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	4.0	1.0

البنية العامة

تأخذ هذه الخاصية كلمة محجوزةً من الكلمات التالية.

القيم للعناصر السطرية

أغلبية القيم تؤدي إلى محاذاة العنصر رأسيًا نسبةً إلى العنصر الأب. لاحظ أنَّ حافة الهامش السفلية ستستخدم بدلًا من خط الارتكاز وذلك للعناصر التي لا يكون لها خط ارتكاز.

القيمة baseline

محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للعنصر الأب؛ لاحظ أنَّ خط الارتكاز لبعض العناصر المُستبدَلة مثل <textarea> ليس مُحدَّدًا في مواصفة HTML، وهذا يعني أنَّ سلوك تلك العناصر مع هذه القيمة قد يختلف من متصفحٍ لآخر.

القيمة sub

محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأدنى (subscript-baseline) للعنصر الأب.

القيمة super

محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأعلى (superscript-baseline) للعنصر الأب.

القيمة text-top

محاذاة أعلى العنصر مع أعلى قسم من خط العنصر الأب.

القيمة text-bottom

محاذاة أسفل العنصر مع أسفل قسم من خط العنصر الأب.

القيمة middle

محاذاة خط الارتكاز للعنصر مع وسط العنصر الأب + نصف ارتفاع x-height.

القيمة <length>

محاذاة خط الارتكاز للعنصر على بُعدٍ معيّن فوق خط الارتكاز للعنصر الأب.

القيمة <percentage>

مثل القيمة <length>، وتكون القيم نسبةً إلى قيمة الخاصية line-height.

يجدر بالذكر أنَّ كلًا من القيمتين <length> و <percentage> يمكن أن تكونا سالبتين.

القيمة top

محاذاة أعلى العنصر مع أعلى السطر (وليس العنصر الأب).

القيمة bottom

محاذاة أسفل العنصر مع أسفل السطر (وليس العنصر الأب).

القيم لخلايا الجداول

القيمة baseline (و sub و super و text-top و text-bottom و <length> و <percentage>)

محاذاة خط الأساس للخلية مع خط الأساس لبقية الخلايا الموجودة في السطر (row).

القيمة top

محاذاة حافة الحاشية العليا (padding edge) للخلية مع أعلى السطر.

القيمة middle

توسيط صندوق الحاشية (padding box) للخلية ضمن السطر.

القيمة bottom

محاذاة حافة الحاشية السفلى (padding edge) للخلية مع أسفل السطر.

البنية الرسمية

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;

مصادر ومواصفات

• مواصفة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎، أضافت هذه المواصفة القيم الطولية <length> وسمحت بتطبيقها على عنصر له القيمة table-cell للخاصية display.
• مواصفة CSS Level 1.