text-align

خاصية محاذاة النص text-align

خاصية text-align تحاذي النص داخل حاويته — وقيمتاها المنطقيتان start/end تجعلان موقعك ثنائي الاتجاه بلا تعديل.

المحاذاة الكلاسيكية: يمين، يسار، توسيط، أو ضبط كامل justify. والدرس الأهم لمطور المحتوى العربي: انسَ left/right المطلقتين واستعمل **start/end المنطقيتين** — start تعني «بداية اتجاه الكتابة» فتصبح يمينًا في العربية ويسارًا في الإنجليزية تلقائيًا، وموقعك يخدم اللغتين بلا صيانة مزدوجة.

أما justify فوسيلة إغراء خطيرة عربيًا: يمدد الفراغات لضبط الحواف فينتج «أنهارًا» بيضاء داخل الفقرات — الصحف تضبطه بأدوات فاصلة متقدمة؛ على الويب اتركه غالبًا.

الصياغة

p { text-align: start; }   /* يمين بالعربية، يسار بالإنجليزية */
.hero { text-align: center; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>.d div { background: #ede9fe; padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; }</style>
<div class="d">
  <div style="text-align:start">start — بداية القراءة (يمين هنا)</div>
  <div style="text-align:center">center — توسيط</div>
  <div style="text-align:end">end — نهاية القراءة</div>
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
start / end	المنطقيتان — تحترمان اتجاه اللغة تلقائيًا
center	توسيط — عناوين الأقسام وبطاقات الدعوة
justify	ضبط الحواف — حذارِ أنهار الفراغات عربيًا

💡 نصائح عملية

قاعدة موقع عربي: start/end دائمًا، وleft/right للاستثناءات الواعية فقط
توسيط عنوان وفقرة تعريف تحته جميل — توسيط فقرات طويلة مرهق

⚠️ أخطاء شائعة

text-align: left موروثة من قالب أجنبي تكسر انسياب العربية
justify لفقرات ويب عربية بلا ضرورة — فجوات قبيحة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs