خاصية text-align

آخر تحديث: 2026-09-13

text-align خاصية text-align

تحدد خاصية text-align في CSS المحاذاة الأفقية للنص داخل عنصر على مستوى الكتلة. تدعم القيم left وright وcenter وjustify وتُطبَّق على الفقرات والعناوين وخلايا الجداول وأي حاوية كتلة أخرى. لاحظ أن text-align يحاذي المحتوى داخل العنصر وليس العنصر نفسه.

الفئة
القيمة الأوليةstart
موروثنعم
ينطبق علىblock
نوع الحركةdiscrete
إصدار CSSCSS1
الحالةقياسي

📝 التركيب

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

⚙️ القيم

القيمةالنوعالوصف
start | end | left | right | center | justify | match-parentكلمة مفتاحيةقيم محاذاة النص الأفقية

▶ مثال

عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:

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

المتصفح ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
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.

📚 دروس ذات صلة

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%