CSS/vertical-align

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

بطاقة الخاصية

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

/* كلمات محجوزة */
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 و top و middle و bottom مع الخاصية vertical-align:

<table>
  <tr>
    <td class="baseline"><code>على السطر</code></td>
    <td class="top"><code>الأعلى</code></td>
    <td class="middle"><code>الوسط</code></td>
    <td class="bottom"><code>الأسفل</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><img src="image.png" alt="link" width="32" height="32">الصورة في وضعية المحاذاة الافتراضية</div>
<div><img class="top" src="image.png" alt="link" width="32" height="32"> الصورة في وضعية محاذاة في الأعلى</div>
<div><img class="bottom" src="image.png" alt="link" width="32" height="32"> الصورة في وضعية محاذاة في الأسفل</div>
<div><img class="middle" src="image.png" alt="link" width="32" height="32"> الصورة في وضعية محاذاة في الوسط</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>;

 انظر أيضًا

• صفحة الخاصية align-content التي تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.
• صفحة الخاصية align-items التي تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.
• صفحة الخاصية align-self التي تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items.

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

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