الخاصية `text-align`

الخاصية text-align في CSS تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية؛ لاحظ أنَّ الخاصية text-align لا تتحكم بمحاذاة العناصر الكتلية، وإنما تتحكم بمحاذاة بالمحتوى السطري الموجود داخلها.

/* كلمات محجوزة */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* القيم العامة */
text-align: inherit;
text-align: initial;
text-align: unset;

القيمة الابتدائية	`start`، أو قيمة غير محددة ستمثِّل القيمة `left` إذا كان اتجاه العنصر `ltr`، و `right` إذا كان اتجاه النص `rtl` وذلك في حال كانت القيمة `start` غير مدعومة في المتصفح.
تُطبَّق على	الحاويات الكتلية.
قابلة للوراثة	نعم
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدت، باستثناء الكلمة المحجوزة `match-parent`، التي ستنظر في اتجاه العنصر الأب وتتحول إلى القيمة `left` أو `right`.

أمثلة

مثال عن استخدام جميع الكلمات المحجوزة المدعومة في خاصية text-align، وسنكرر كل مثال مرتين، مرةً على فقرةٍ باللغة الإنكليزية (اتجاه النص من اليسار إلى اليمين)، ومرةً على فقرةٍ باللغة العربية (اتجاه النص من اليمين إلى اليسار):

<p class="start" dir="ltr">Testing <code>text-align: start</code></p>
<p class="start" dir="rtl">تجربة <code>text-align: start</code></p>
<hr>

<p class="end" dir="ltr">Testing <code>text-align: end</code></p>
<p class="end" dir="rtl">تجربة <code>text-align: end</code></p>
<hr>

<p class="left" dir="ltr">Testing <code>text-align: left</code></p>
<p class="left" dir="rtl">تجربة <code>text-align: left</code></p>
<hr>

<p class="right" dir="ltr">Testing <code>text-align: right</code></p>
<p class="right" dir="rtl">تجربة <code>text-align: right</code></p>
<hr>

<p class="center" dir="rtl">تجربة <code>text-align: center</code></p>
<p class="center" dir="ltr">Testing <code>text-align: center</code></p>
<hr>

<p class="justify" dir="ltr">Testing <code>text-align: justify</code>. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
<p class="justify" dir="rtl">تجربة <code>text-align: justify</code>. سيحاول المتصفح ملء كامل السطر بالنص من الحافة اليسرى إلى الحافة اليمنى من الصندوق السطري، باستثناء السطر الأخير.</p>
<hr>

<div dir="rtl"><p class="match-parent" dir="ltr">Testing <code>text-align: match-parent</code></p></div>
<div dir="ltr"><p class="match-parent" dir="rtl">تجربة <code>text-align: match-parent</code></p></div>

شيفرة CSS:

p {
  background-color: #f8f9fa;
  border: 1px solid #eaecf0;
  padding: 1em;
  margin: 1em;
}

.end { text-align: end; }
.left { text-align: left; }
.right { text-align: right; }
.start { text-align: start; }
.center { text-align: center; }
.justify { text-align: justify; }
.match-parent { text-align: match-parent; }

لاحظ في آخر مثال كيف أنَّ اتجاه العنصر الأب مخالف لاتجاه العنصر الذي طُبِّقتَ عليه القاعدة text-align: match-parent. يجدر بالذكر أنَّ الخاصية match-parent قد لا تعمل في جميع المتصفحات (حتى الحديثة منها)، ويلزم استخدام سابقة (مثل -webkit-) معها.

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي (left و right و center و justify)	1.0	1.0	3.0	3.5	1.0
start	1.0	1.0	غير مدعومة	مدعومة	3.1
end	1.0	3.6	غير مدعومة	مدعومة	3.1
match-parent	16	40	غير مدعومة	غير مدعومة	غير مدعومة
justify-all	غير مدعومة	غير مدعومة	غير مدعومة	غير مدعومة	غير مدعومة

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

تقبل الخاصية text-align إحدى الكلمات المحجوزة الآتية.

القيمة `start`

تسلك سلوك الكلمة المحجوزة left إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك right إذا كان اتجاه العنصر من اليمين إلى اليسار.

القيمة `end`

تسلك سلوك الكلمة المحجوزة right إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك left إذا كان اتجاه العنصر من اليمين إلى اليسار.

القيمة `left`

ستُحاذى العناصر السطرية إلى الحافة اليسرى من الصندوق السطري (line box).

القيمة `right`

ستُحاذى العناصر السطرية إلى الحافة اليمنى من الصندوق السطري (line box).

القيمة `center`

ستُحاذى العناصر السطرية إلى منتصف الصندوق السطري (line box).

القيمة `justify`

سيحاول المتصفح ملء كامل السطر بالنص من الحافة اليسرى إلى الحافة اليمنى من الصندوق السطري، باستثناء السطر الأخير.

القيمة `justify-all`

كما الكلمة justify، لكن سيملأ السطرُ الأخيرُ الصندوقَ السطري.

القيمة `match-parent`

تشبه الكلمة المحجوزة inherit، لكن قيمة start و end ستُحسَب اعتمادًا على اتجاه العنصر الأب، ثم ستُستبدَل بالقيمتين left أو right.

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

text-align: start | end | left | right | center | justify | match-parent;

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

مسودة CSS Logical Properties Level 1.
مسودة CSS Text Module Level 3، أضافت هذه المسودة الكلمات المحجوزة start و end و match-parent، وغيّرت القيمة الابتدائية غير المُحدَّدة إلى start.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

أمثلة

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

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

القيمة start

القيمة end

القيمة left

القيمة right

القيمة center

القيمة justify

القيمة justify-all

القيمة match-parent