محاذاة النص

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 21 من 76.

في CSS، تُستخدم خاصية text-align للتحكم في المحاذاة الأفقية للنص داخل عنصر HTML.

القيم الشائعة لـ text-align تشمل:

left: يقوم بمحاذاة النص إلى اليسار. هذا هو المحاذاة الافتراضية لمعظم النصوص.

right: يقوم بمحاذاة النص إلى اليمين.
center: يقوم بتوسيط النص أفقياً داخل العنصر.

على سبيل المثال:

p {
    text-align: left;
}

h1 {
    text-align: center;
}

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

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوان (<h1>)، وفقرة (<p>)، وقسم (<div>). مهمتك هي استخدام خاصية text-align لتنسيق هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <h1>. قم بتعيين text-align إلى center.
اكتب قاعدة CSS تستهدف عنصر <p>. قم بتعيين text-align إلى right.
اكتب قاعدة CSS تستهدف عنصر <div>. قم بتعيين text-align إلى left.

ورقة مرجعية

تتحكم خاصية text-align في محاذاة النص الأفقية داخل العنصر.

القيم الشائعة:

left: يحاذي النص إلى اليسار (افتراضي)
right: يحاذي النص إلى اليمين
center: يتوسط النص أفقياً

p {
    text-align: left;
}

h1 {
    text-align: center;
}

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

جرّب بنفسك

<html>
<head>
    <title>Text Alignment</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading. </h1>
    <p>This is a paragraph.</p>
    <div>This is a division. </div>
</body>
</html>