الفرق بين المراجعتين لصفحة: «CSS/vertical-align»

مراجعة 10:00، 30 يوليو 2018

الخاصية 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>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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>vertical-align</code>}}</noinclude>
-الخاصية <code>vertical-align</code> في CSS تُحدِّد المحاذاة الرأسية للعناصر السطرية أو خلايا الجداول.<syntaxhighlight lang="css">
+الخاصية <code>vertical-align</code> في CSS تُحدِّد المحاذاة الرأسية للعناصر السطرية أو خلايا الجداول.
+== بطاقة الخاصية ==
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|<code>baseline</code>
+|-
+! scope="row" |تُطبَّق على
+|العناصر السطرية وخلايا الجداول.
+|-
+! scope="row" |قابلة للوراثة
+|لا
+|-
+!قابلة للحركة
+|نعم
+|-
+! scope="row" |القيمة المحسوبة
+|كما حُدِّدَت، مع تحويل النسب المئوية إلى أطوال مطلقة.
+|}
+<syntaxhighlight lang="css">
 /* كلمات محجوزة */
 vertical-align: baseline;
@@ سطر 27: / سطر 49: @@
 * لمحاذاة محتويات خلايا الجداول رأسيًا.
 لاحظ أنَّ الخاصية <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" |القيمة المحسوبة
-|كما حُدِّدَت، مع تحويل النسب المئوية إلى أطوال مطلقة.
-|}
 == أمثلة ==
@@ سطر 114: / سطر 118: @@
 أغلبية القيم تؤدي إلى محاذاة العنصر رأسيًا نسبةً إلى العنصر الأب. لاحظ أنَّ حافة الهامش السفلية ستستخدم بدلًا من خط الارتكاز وذلك للعناصر التي لا يكون لها خط ارتكاز.
-==== القيمة <code>baseline</code> ====
+====  <code>baseline</code> ====
 محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للعنصر الأب؛ لاحظ أنَّ خط الارتكاز لبعض العناصر المُستبدَلة مثل <code>[[HTML/textarea|<textarea>]]</code> ليس مُحدَّدًا في مواصفة HTML، وهذا يعني أنَّ سلوك تلك العناصر مع هذه القيمة قد يختلف من متصفحٍ لآخر.
-==== القيمة <code>sub</code> ====
+==== <code>sub</code> ====
 محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأدنى (subscript-baseline) للعنصر الأب.
-==== القيمة <code>super</code> ====
+====  <code>super</code> ====
 محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأعلى (superscript-baseline) للعنصر الأب.
-==== القيمة <code>text-top</code> ====
+==== <code>text-top</code> ====
 محاذاة أعلى العنصر مع أعلى قسم من خط العنصر الأب.
-==== القيمة <code>text-bottom</code> ====
+====  <code>text-bottom</code> ====
 محاذاة أسفل العنصر مع أسفل قسم من خط العنصر الأب.
-==== القيمة <code>middle</code> ====
+====  <code>middle</code> ====
 محاذاة خط الارتكاز للعنصر مع وسط العنصر الأب + نصف ارتفاع x-height.
-==== القيمة <code>[[CSS/length|<length>]]</code> ====
+====  <code>[[CSS/length|<length>]]</code> ====
 محاذاة خط الارتكاز للعنصر على بُعدٍ معيّن فوق خط الارتكاز للعنصر الأب.
-==== القيمة <code>[[CSS/percentage|<percentage>]]</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/line-height|line-height]]</code>.
-يجدر بالذكر أنَّ كلًا من القيمتين <code>[[CSS/length|<length>]]</code> و <code>[[CSS/percentage|<percentage>]]</code> يمكن أن تكونا سالبتين.
+يجدر بالذكر أنَّ كلًا من <code>[[CSS/length|<length>]]</code> و <code>[[CSS/percentage|<percentage>]]</code> يمكن أن تكونا سالبتين.
-==== القيمة <code>top</code> ====
+====  <code>top</code> ====
 محاذاة أعلى العنصر مع أعلى السطر (وليس العنصر الأب).
-==== القيمة <code>bottom</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>) ====
+====  <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> ====
+====  <code>top</code> ====
 محاذاة حافة الحاشية العليا (padding edge) للخلية مع أعلى السطر.
-==== القيمة <code>middle</code> ====
+====  <code>middle</code> ====
 توسيط صندوق الحاشية (padding box) للخلية ضمن السطر.
-==== القيمة <code>bottom</code> ====
+====  <code>bottom</code> ====
 محاذاة حافة الحاشية السفلى (padding edge) للخلية مع أسفل السطر.

مراجعة 10:00، 30 يوليو 2018

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

أمثلة

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

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

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

baseline

sub

super

text-top

text-bottom

middle

<length>

<percentage>

top

bottom

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

baseline (و sub و super و text-top و text-bottom و <length> و <percentage>)

top

middle

bottom

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

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

`baseline`

`sub`

`super`

`text-top`

`text-bottom`

`middle`

`<length>`

`<percentage>`

`top`

`bottom`

`baseline` (و `sub` و `super` و `text-top` و `text-bottom` و `<length>` و `<percentage>`)

`top`

`middle`

`bottom`