خاصية text-align
آخر تحديث: 2026-09-13
text-align خاصية text-align
تحدد خاصية text-align في CSS المحاذاة الأفقية للنص داخل عنصر على مستوى الكتلة. تدعم القيم left وright وcenter وjustify وتُطبَّق على الفقرات والعناوين وخلايا الجداول وأي حاوية كتلة أخرى. لاحظ أن text-align يحاذي المحتوى داخل العنصر وليس العنصر نفسه.
| الفئة | |
|---|---|
| القيمة الأولية | start |
| موروث | نعم |
| ينطبق على | block |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
text-align: start | end | left | right | center | justify | match-parent;
⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
start | end | left | right | center | justify | match-parent | كلمة مفتاحية | قيم محاذاة النص الأفقية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح | |||||
|---|---|---|---|---|---|
| text-align | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح: تُحل start وend إلى الحافة اليسرى أو اليمنى بناءً على اتجاه النص، مما يجعلها أنسب من left/right للمواقع متعددة اللغات.
تحذير: يؤثر text-align فقط على العناصر على مستوى الكتلة؛ ولتوسيط عنصر مضمّن مثل صورة أفقيًا، اضبط text-align: center على الأب.
❓ الأسئلة الشائعة
Qلماذا يبدو أن text-align: justify أحيانًا ليس له تأثير؟
Aتُطبَّق التسوية فقط على الأسطر التي ليست الأخيرة من فقرة متعددة الأسطر. فإذا كان النص سطرًا واحدًا، أو كان السطر هو الأخير في الفقرة، فإن justify لا ينتج أي تعديل مرئي للمسافات.
Qهل يمكن استخدام خاصية text-align لتوسيط النص عموديًا في CSS؟
Aلا. يتحكم text-align فقط في المحاذاة الأفقية. للتوسيط العمودي، استخدم line-height أو vertical-align أو Flexbox أو Grid.
Qكيف أوسّط صورة أفقيًا داخل حاوية باستخدام CSS؟
Aالصورة عنصر مضمّن، لذا يكون margin: auto عليها بلا تأثير. اضبط text-align: center على الحاوية الأب بدلاً من ذلك؛ أو اجعل الصورة display: block ثم استخدم margin: 0 auto. وفي Flexbox استخدم justify-content: center.