🎯 محاذاة النصوص في CSS: دليلك الشامل للبدء

اليوم سنتعلم واحدة من أهم الخصائص في CSS التي ستغير شكل موقعك تماماً: محاذاة النصوص 🚀. سواء كنت تريد توسيط عنوان، أو محاذاة فقرة لليمين، فهذا الدرس سيعلمك كيفية فعل ذلك ببساطة.

📝 ما هي خاصية text-align؟

text-align هي خاصية CSS تُستخدم للتحكم في المحاذاة الأفقية للنص داخل عنصر HTML. تخيل أن لديك صندوقاً (مثل <div> أو <p>) بداخله نص. تتحكم text-align في كيفية توزيع هذا النص داخل الصندوق على المحور الأفقي (من اليسار إلى اليمين).

selector {
    text-align: value;
}

selector هو العنصر الذي نريد تطبيق المحاذاة عليه، مثل p أو .title.

🧭 قيم خاصية text-align الأساسية

هناك أربع قيم أساسية نستخدمها في معظم الأوقات. دعنا نتعرف عليها واحدة تلو الأخرى مع أمثلة بسيطة.

1. المحاذاة لليسار left

هذه هي القيمة الافتراضية في معظم المتصفحات للغات التي تُكتب من اليسار إلى اليمين (مثل الإنجليزية). تجعل النص يلتصق بالحافة اليسرى للعنصر.

p {
    text-align: left;
}

2. المحاذاة لليمين right

تجعل النص يلتصق بالحافة اليمنى للعنصر. هذه القيمة مفيدة جداً عند التصميم للغات التي تُكتب من اليمين لليسار (مثل العربية)، أو لعناصر خاصة.

.author-name {
    text-align: right;
}

3. التوسيط center

هذه هي القيمة الأشهر! تُستخدم لتوسيط النص داخل العنصر، مما يجعله يبدو متوازناً وجذاباً، خاصة للعناوين الرئيسية.

h1 {
    text-align: center;
}

4. الضبط justify

تُوسّط المسافات بين الكلمات بحيث يلامس النص الحافتين اليمنى واليسرى للعنصر. تشبه محاذاة الجرائد والمجلات.

.news-article {
    text-align: justify;
}

💻 مثال عملي شامل

لنطبق ما تعلمناه في مثال بسيط. تخيل أن لديك صفحة ويب تحتوي على عنوان، واسم كاتب، ومحتوى.

<!DOCTYPE html>
<html>
<head>
    <style>
        .page-title {
            text-align: center; /* العنوان في المنتصف */
            color: darkblue;
        }
        .author {
            text-align: right; /* اسم الكاتب على اليمين */
            font-style: italic;
        }
        .content {
            text-align: justify; /* محتوى المقال مضمط */
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1 class="page-title">مقالي الأول عن CSS</h1>
    <p class="author">كتبه: أحمد</p>
    <p class="content">هذا هو نص المقال الطويل. عند استخدام محاذاة الضبط (justify)، سيتم توسيط المسافات بين الكلمات بحيث يبدو النص مرتباً ويملأ السطر بالكامل من اليسار إلى اليمين، مما يعطي مظهراً احترافياً يشبه الكتب والمجلات.</p>
</body>
</html>

⚠️ ملاحظات هامة للمبتدئين

  1. لا تؤثر على العناصر ذات العرض الثابت؟ تذكر أن خاصية text-align تؤثر على النص داخل العنصر. إذا كان العنصر نفسه (مثل <div>) لا يشغل العرض الكامل للصفحة، فقد لا تلاحظ تأثير المحاذاة كما تتوقع. تأكد من أن العنصر له عرض كافٍ.
  2. للعناوين والعناصر الأخرى: يمكنك استخدام text-align مع أي عنصر يحتوي على نص، مثل <h1> إلى <h6>, <p>, <span>, <div>، وغيرها.