عرض مصدر CSS/vertical-align

<noinclude>{{DISPLAYTITLE:الخاصية <code>vertical-align</code>}}</noinclude>
الخاصية <code>vertical-align</code> في CSS تُحدِّد المحاذاة الرأسية للعناصر السطرية أو خلايا الجداول.<syntaxhighlight lang="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;

</syntaxhighlight>يمكن أن تستخدم الخاصية <code>vertical-align</code> استخدامين مختلفين:
* لمحاذاة العناصر السطرية رأسية ضمن الصندوق السطري (line box) الذي تتبع له، فمثلًا يمكن محاذاة صورة <code>[[HTML/img|<img>]]</code> رأسيًا في سطرٍ نصي.
* لمحاذاة محتويات خلايا الجداول رأسيًا.
لاحظ أنَّ الخاصية <code>vertical-align</code> تُطبَّق على العناصر السطرية وخلايا الجداول فقط، إذ لا تستطيع استخدامها لمحاذاة العناصر الكتلية (block elements).
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>baseline</code>
|-
! scope="row" |تُطبَّق على
|العناصر السطرية وخلايا الجداول.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للحركة
|نعم
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت، مع تحويل النسب المئوية إلى أطوال مطلقة.

|}

== أمثلة ==
مثال عن محاذاة خلايا الجداول باستخدام القيم <code>baseline</code> و <code>top</code> و <code>middle</code> و <code>bottom</code> مع الخاصية <code>vertical-align</code>:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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; }
</syntaxhighlight>مثال عن محاذاة صورة <code>[[HTML/img|<img>]]</code> باستخدام القيم <code>text-top</code> و <code>text-bottom</code> و <code>middle</code>:<syntaxhighlight lang="html">
<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>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.top { vertical-align: text-top; }
.bottom { vertical-align: text-bottom; }
.middle { vertical-align: middle; }

</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|4.0
|1.0
|}
== البنية العامة ==
تأخذ هذه الخاصية كلمة محجوزةً من الكلمات التالية.

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

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

==== القيمة <code>sub</code> ====
محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأدنى (subscript-baseline) للعنصر الأب.

==== القيمة <code>super</code> ====
محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأعلى (superscript-baseline) للعنصر الأب.

==== القيمة <code>text-top</code> ====
محاذاة أعلى العنصر مع أعلى قسم من خط العنصر الأب.

==== القيمة <code>text-bottom</code> ====
محاذاة أسفل العنصر مع أسفل قسم من خط العنصر الأب.

==== القيمة <code>middle</code> ====
محاذاة خط الارتكاز للعنصر مع وسط العنصر الأب + نصف ارتفاع x-height.

==== القيمة <code>[[CSS/length|<length>]]</code> ====
محاذاة خط الارتكاز للعنصر على بُعدٍ معيّن فوق خط الارتكاز للعنصر الأب.

==== القيمة <code>[[CSS/percentage|<percentage>]]</code> ====
مثل القيمة <code>[[CSS/length|<length>]]</code>، وتكون القيم نسبةً إلى قيمة الخاصية <code>[[CSS/line-height|line-height]]</code>.

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

==== القيمة <code>top</code> ====
محاذاة أعلى العنصر مع أعلى السطر (وليس العنصر الأب).

==== القيمة <code>bottom</code> ====
محاذاة أسفل العنصر مع أسفل السطر (وليس العنصر الأب).

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

==== القيمة <code>baseline</code> (و <code>sub</code> و <code>super</code> و <code>text-top</code> و <code>text-bottom</code> و <code>[[CSS/length|<length>]]</code> و <code>[[CSS/percentage|<percentage>]]</code>) ====
محاذاة خط الأساس للخلية مع خط الأساس لبقية الخلايا الموجودة في السطر (row).

==== القيمة <code>top</code> ====
محاذاة حافة الحاشية العليا (padding edge) للخلية مع أعلى السطر.

==== القيمة <code>middle</code> ====
توسيط صندوق الحاشية (padding box) للخلية ضمن السطر.

==== القيمة <code>bottom</code> ====
محاذاة حافة الحاشية السفلى (padding edge) للخلية مع أسفل السطر.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;
</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
* مواصفة ‎[http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align CSS Level 2 (Revision 1)‎]، أضافت هذه المواصفة القيم الطولية <code>[[CSS/length|<length>]]</code> وسمحت بتطبيقها على عنصر له القيمة <code>table-cell</code> للخاصية <code>[[CSS/display|display]]</code>.
* مواصفة [http://www.w3.org/TR/CSS1/#vertical-align CSS Level 1]. 
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Table]]