الخاصية text-align

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

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

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

/* كلمات محجوزة */
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;

أمثلة

مثال عن استخدام جميع الكلمات المحجوزة المدعومة في خاصية 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;

 انظر أيضًا

• صفحة الخاصية  text-align-last التي تصف كيف تكون محاذاة آخر سطر نصي.
• صفحة الخاصية  right التي تساهم في تحديد الموضع الأفقي الأيمن لأحد العناصر التي يمكن أن يتغير مكانها.
• صفحة الخاصية  left التي تساهم في تحديد الموضع الأفقي الأيسر لأحد العناصر التي يمكن أن يتغير مكانها.

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

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