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

من موسوعة حسوب
< CSS
→ التعديل السابق
مرئينص الويكي
لا ملخص تعديل
 
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين)
سطر 54: سطر 54:
<table>
<table>
   <tr>
   <tr>
     <td class="baseline"><code>baseline</code></td>
     <td class="baseline"><code>على السطر</code></td>
     <td class="top"><code>top</code></td>
     <td class="top"><code>الأعلى</code></td>
     <td class="middle"><code>middle</code></td>
     <td class="middle"><code>الوسط</code></td>
     <td class="bottom"><code>bottom</code></td>
     <td class="bottom"><code>الأسفل</code></td>
     <td>
     <td>
       <p>سنضع فقرةً طويلةً في هذه الخلية لكي تنقسم إلى عدِّة أسطر لكي يصبح أثر الخاصية vertical-align جليًا.</p>
       <p>سنضع فقرةً طويلةً في هذه الخلية لكي تنقسم إلى عدِّة أسطر لكي يصبح أثر الخاصية vertical-align جليًا.</p>
سطر 84: سطر 84:
.bottom  { vertical-align: bottom; }
.bottom  { vertical-align: bottom; }
</syntaxhighlight>مثال عن محاذاة صورة <code>[[HTML/img|<img>]]</code> باستخدام القيم <code>text-top</code> و <code>text-bottom</code> و <code>middle</code>:<syntaxhighlight lang="html">
</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><img src="image.png" alt="link" width="32" height="32">الصورة في وضعية المحاذاة الافتراضية</div>
<div>An <img class="top" src="image.png" alt="link" width="32" height="32"> image with a text-top alignment.</div>
<div><img class="top" src="image.png" alt="link" width="32" height="32"> الصورة في وضعية محاذاة في الأعلى</div>
<div>An <img class="bottom" src="image.png" alt="link" width="32" height="32"> image with a text-bottom alignment.</div>
<div><img class="bottom" src="image.png" alt="link" width="32" height="32"> الصورة في وضعية محاذاة في الأسفل</div>
<div>An <img class="middle" src="image.png" alt="link" width="32" height="32"> image with a middle alignment.</div>
<div><img class="middle" src="image.png" alt="link" width="32" height="32"> الصورة في وضعية محاذاة في الوسط</div>


</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.top { vertical-align: text-top; }
.top   { vertical-align: text-top; }
.bottom { vertical-align: text-bottom; }
.bottom { vertical-align: text-bottom; }
.middle { vertical-align: middle; }
.middle { vertical-align: middle; }
سطر 168: سطر 168:
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;
</syntaxhighlight>
</syntaxhighlight>
==  انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/align-content|align-content]]</code> التي تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.
* صفحة الخاصية <code>[[CSS/align-items|align-items]]</code> التي تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.
* صفحة الخاصية <code>[[CSS/align-self|align-self]]</code> التي تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية <code>[[CSS/align-items|align-items]]</code>.
== مصادر ومواصفات ==
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
* مواصفة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].

المراجعة الحالية بتاريخ 14:15، 12 أغسطس 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>على السطر</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.

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/vertical-align&oldid=14884»