آموزش تراز متن و جهت متن در CSS

ویژگی‌های مهم در این بخش

در این فصل با ویژگی‌های زیر آشنا می‌شویم:

• text-align → تعیین تراز افقی متن
• text-align-last → تعیین تراز آخرین خط متن
• vertical-align → تعیین تراز عمودی عنصر
• direction → تعیین جهت نوشتار متن
• unicode-bidi → کنترل نمایش متن در زبان‌های مختلف

آ۱. ویژگی text-align

ویژگی text-align برای تعیین تراز افقی متن استفاده می‌شود. مقادیر آن عبارت‌اند از:

• left → تراز به سمت چپ
• right → تراز به سمت راست
• center → قرار گرفتن متن در وسط
• justify → کشیده شدن خطوط به‌گونه‌ای که عرض همه خطوط برابر باشد (مانند روزنامه‌ها و مجلات)

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

div {
  text-align: justify;
}

ویژگی text-align-last مشخص می‌کند آخرین خط متن چگونه تراز شود. مقادیر آن:

• auto → مقدار پیش‌فرض (آخرین خط justify و تراز چپ)
• left → آخرین خط به چپ تراز شود
• right → آخرین خط به راست تراز شود
• center → آخرین خط در وسط قرار گیرد
• justify → آخرین خط مانند سایر خطوط کشیده شود
• start → آخرین خط در ابتدای خط قرار گیرد
• end → آخرین خط در انتهای خط قرار گیرد

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

ویژگی vertical-align برای تعیین تراز عمودی عنصر استفاده می‌شود. مقادیر آن:

• baseline → پیش‌فرض، هم‌تراز با خط پایه والد
• length/% → بالا یا پایین بردن عنصر به اندازه مشخص
• sub → هم‌تراز با زیرنویس والد
• super → هم‌تراز با بالانویس والد
• top → هم‌تراز با بالاترین عنصر در خط
• text-top → هم‌تراز با بالای فونت والد
• middle → قرار گرفتن در وسط عنصر والد
• bottom → هم‌تراز با پایین‌ترین عنصر در خط
• text-bottom → هم‌تراز با پایین فونت والد

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;
}

ویژگی direction جهت نوشتار متن را مشخص می‌کند:

• ltr → چپ به راست (پیش‌فرض برای زبان‌هایی مثل انگلیسی)
• rtl → راست به چپ (برای زبان‌هایی مثل فارسی و عربی)

ویژگی unicode-bidi همراه با direction استفاده می‌شود تا نمایش متن در زبان‌های مختلف کنترل ش

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