محاذاة نص CSS
محاذاة النص
تُستخدم text-align
الخاصية لتعيين المحاذاة الأفقية للنص.
يمكن محاذاة النص إلى اليسار أو اليمين أو توسيطه أو ضبطه.
يوضح المثال التالي محاذاة للوسط ، ونصًا محاذيًا لليسار ولليمين (المحاذاة إلى اليسار تكون افتراضيًا إذا كان اتجاه النص من اليسار إلى اليمين ، والمحاذاة إلى اليمين تكون افتراضيًا إذا كان اتجاه النص من اليمين إلى اليسار):
مثال
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
عندما text-align
يتم تعيين الخاصية على "ضبط" ، يتم تمديد كل سطر بحيث يكون لكل سطر عرض متساوٍ ، ويكون الهامش الأيمن والأيسر مستقيماً (كما هو الحال في المجلات والصحف):
مثال
div {
text-align: justify;
}
محاذاة النص أخيرًا
text-align-last
تحدد الخاصية كيفية محاذاة السطر الأخير من النص .
مثال
قم بمحاذاة السطر الأخير من النص في ثلاثة عناصر <p>:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
اتجاه النص
يمكن استخدام الخصائص direction
و
unicode-bidi
الخصائص لتغيير اتجاه النص لعنصر ما:
مثال
p {
direction: rtl;
unicode-bidi: bidi-override;
}
انحياز عمودي
تحدد vertical-align
الخاصية المحاذاة الرأسية للعنصر.
مثال
اضبط المحاذاة الرأسية للصورة في النص:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align:
text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}