CSS/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.