آموزش کامل ترازبندی متن ها در CSS

مقدمه

ترازبندی متن‌ها (Text Alignment) در CSS یکی از پایه‌ای‌ترین اصول طراحی وب است و باعث خوانایی و زیبایی محتوا می‌شود. با استفاده از ویژگی‌های مختلف CSS می‌توان متن‌ها را در جهت‌های مختلف، وسط یا چپ و راست ترازبندی کرد. برای یادگیری کامل CSS و طراحی حرفه‌ای، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی ترازبندی متن‌ها

ویژگی text-align مشخص می‌کند که متن داخل عنصر بلاک چگونه نمایش داده شود.

left → ترازبندی متن به چپ
right → ترازبندی متن به راست
center → ترازبندی متن در وسط
justify → توزیع متن به صورت مساوی در کل عرض عنصر

مثال عملی با کد

ترازبندی متن به چپ:

p {
  text-align: left;
}

ترازبندی متن به راست:

p {
  text-align: right;
}

ترازبندی متن در وسط:

p {
  text-align: center;
}

ترازبندی متن به صورت justify:

p {
  text-align: justify;
}

استفاده از ترازبندی در عناوین:

h1 {
  text-align: center;
}

نکات مهم و توضیحات تکمیلی

ترازبندی مناسب باعث خوانایی بهتر متن و طراحی حرفه‌ای می‌شود.
استفاده از justify برای پاراگراف‌های طولانی توصیه می‌شود.
برای طراحی واکنش‌گرا، ترازبندی متن‌ها باید با اندازه صفحه و کانتینر هماهنگ باشد.
می‌توان ترازبندی متن را با ویژگی‌های دیگر مانند line-height و letter-spacing ترکیب کرد.