الفرق بين المراجعتين ل"CSS/vertical-align"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
 
 
(4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>vertical-align</code>}}</noinclude>
 
<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;
 
vertical-align: baseline;
سطر 27: سطر 49:
 
* لمحاذاة محتويات خلايا الجداول رأسيًا.
 
* لمحاذاة محتويات خلايا الجداول رأسيًا.
 
لاحظ أنَّ الخاصية <code>vertical-align</code> تُطبَّق على العناصر السطرية وخلايا الجداول فقط، إذ لا تستطيع استخدامها لمحاذاة العناصر الكتلية (block elements).
 
لاحظ أنَّ الخاصية <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" |القيمة المحسوبة
 
−
|كما حُدِّدَت، مع تحويل النسب المئوية إلى أطوال مطلقة.
 
−
 
−
|}
 
  
 
== أمثلة ==
 
== أمثلة ==
سطر 50: سطر 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>
سطر 80: سطر 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; }
سطر 114: سطر 118:
 
أغلبية القيم تؤدي إلى محاذاة العنصر رأسيًا نسبةً إلى العنصر الأب. لاحظ أنَّ حافة الهامش السفلية ستستخدم بدلًا من خط الارتكاز وذلك للعناصر التي لا يكون لها خط ارتكاز.
 
أغلبية القيم تؤدي إلى محاذاة العنصر رأسيًا نسبةً إلى العنصر الأب. لاحظ أنَّ حافة الهامش السفلية ستستخدم بدلًا من خط الارتكاز وذلك للعناصر التي لا يكون لها خط ارتكاز.
  
−
==== القيمة <code>baseline</code> ====
+
==== <code>baseline</code> ====
 
محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للعنصر الأب؛ لاحظ أنَّ خط الارتكاز لبعض العناصر المُستبدَلة مثل <code>[[HTML/textarea|<textarea>]]</code> ليس مُحدَّدًا في مواصفة HTML، وهذا يعني أنَّ سلوك تلك العناصر مع هذه القيمة قد يختلف من متصفحٍ لآخر.
 
محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للعنصر الأب؛ لاحظ أنَّ خط الارتكاز لبعض العناصر المُستبدَلة مثل <code>[[HTML/textarea|<textarea>]]</code> ليس مُحدَّدًا في مواصفة HTML، وهذا يعني أنَّ سلوك تلك العناصر مع هذه القيمة قد يختلف من متصفحٍ لآخر.
  
−
==== القيمة <code>sub</code> ====
+
==== <code>sub</code> ====
 
محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأدنى (subscript-baseline) للعنصر الأب.
 
محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأدنى (subscript-baseline) للعنصر الأب.
  
−
==== القيمة <code>super</code> ====
+
==== <code>super</code> ====
 
محاذاة خط الارتكاز (baseline) للعنصر مع خط الارتكاز للمحارف ذات المستوى الأعلى (superscript-baseline) للعنصر الأب.
 
محاذاة خط الارتكاز (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.
 
محاذاة خط الارتكاز للعنصر مع وسط العنصر الأب + نصف ارتفاع 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).
 
محاذاة خط الأساس للخلية مع خط الأساس لبقية الخلايا الموجودة في السطر (row).
  
−
==== القيمة <code>top</code> ====
+
==== <code>top</code> ====
 
محاذاة حافة الحاشية العليا (padding edge) للخلية مع أعلى السطر.
 
محاذاة حافة الحاشية العليا (padding edge) للخلية مع أعلى السطر.
  
−
==== القيمة <code>middle</code> ====
+
==== <code>middle</code> ====
 
توسيط صندوق الحاشية (padding box) للخلية ضمن السطر.
 
توسيط صندوق الحاشية (padding box) للخلية ضمن السطر.
  
−
==== القيمة <code>bottom</code> ====
+
==== <code>bottom</code> ====
 
محاذاة حافة الحاشية السفلى (padding edge) للخلية مع أسفل السطر.
 
محاذاة حافة الحاشية السفلى (padding edge) للخلية مع أسفل السطر.
  
سطر 164: سطر 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].
 
* مواصفة ‎[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/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].  
 
* مواصفة [http://www.w3.org/TR/CSS1/#vertical-align CSS Level 1].  
−
[[تصنيف:CSS]]
+
[[تصنيف:CSS|{{SUBPAGENAME}}]]
−
[[تصنيف:CSS Property]]
+
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
−
[[تصنيف:CSS Table]]
+
[[تصنيف:CSS Table|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 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"