31. محاذاة النص وضبطه (text-align)
تتحكم خاصية text-align في المحاذاة الأفقية للمحتوى المضمن (النصوص، الصور، spans، إلخ) داخل حاوية على مستوى الكتلة (Block-level).
قيم المحاذاة
| القيمة | الوصف |
|---|---|
left (افتراضي) | يحاذي المحتوى إلى الجانب الأيسر من الحاوية. |
right | يحاذي المحتوى إلى الجانب الأيمن من الحاوية. |
center | يوسط المحتوى أفقياً. |
justify | يمدد سطور النص بحيث يكون لكل سطر عرض متساوٍ (غالباً ما يستخدم في الطباعة، ولكن قد يبدو غريباً على الويب). |
css /* توسيط جميع النصوص داخل الهيدر */ header { text-align: center; }
/* محاذاة الفقرات لليسار (غالباً ما يكون افتراضياً، لكنه جيد للتحكم الصريح) */ p { text-align: left; }
/* مفيد لتذييلات حقوق النشر */ footer p { text-align: right; }
تمييز هام: محاذاة النص مقابل محاذاة الكتلة
text-align: center; يوسط فقط المحتوى المضمن (مثل النص والصور) داخل العنصر. إنه لا يوسط العنصر نفسه على مستوى الكتلة. (لتوسيط عنصر كتلة، تستخدم margin: 0 auto; جنباً إلى جنب مع عرض width محدد، كما رأينا في الدرس 14).