تسوية النص CSS

تنسيق النص

text-align العنصر المستخدم لضبط تنسيق النص الأفقي.

النص يمكن أن يكون متنسيقًا إلى اليسار أو إلى اليمين أو في وسط.

النموذج التالي يعرض التوازن الأوسط والتنسيق إلى اليمين واليسار للنص (إذا كان اتجاه النص من اليسار إلى اليمين، فإن التنسيق الافتراضي هو إلى اليسار؛ وإذا كان الاتجاه من اليمين إلى اليسار، فإنه يكون إلى اليمين):

مثال

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

جرب بنفسك

عندما text-align بعد إعداد الخاصية إلى "justify"، سيتم تمديد كل سطر، لجعل كل سطر يمتلك عرضًا متساويًا، والجوانب اليمنى واليسرى مستقيمة (مثل في المجلات والصحف):

مثال

div {
  text-align: justify;
}

جرب بنفسك

اتجاه النص

direction و unicode-bidi يمكن استخدام الخاصية لتغيير توجيه النص للعنصر:

مثال

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

جرب بنفسك

إعداد التوجيه العمودي

vertical-align يضبط إعداد التوجيه العمودي للعنصر.

هذا المثال يوضح كيفية ضبط إعداد التوجيه العمودي للصور في النص:

مثال

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

جرب بنفسك