ترازبندی متن در CSS با text align

روش ترازبندی متن در CSS با text align

ترازبندی متن یکی از جنبه‌های مهم در طراحی صفحات وب است که بر خوانایی و ظاهر محتوا تأثیر مستقیم می‌گذارد. در CSS، ویژگی text align برای کنترل تراز افقی متن درون یک عنصر استفاده می‌شود. این ویژگی به شما امکان می‌دهد متن را به چپ، راست، وسط یا به صورت justify تراز کنید.

مقدار پیش‌فرض این ویژگی بسته به جهت نوشتار صفحه (RTL یا LTR) متفاوت است. در صفحات فارسی که معمولاً RTL هستند، مقدار پیش‌فرض right است، در حالی که در صفحات انگلیسی (LTR) مقدار پیش‌فرض left می‌باشد.

کاربردهای عملی text align

از text align می‌توان در موارد زیر استفاده کرد:

ترازبندی عنوان‌ها و پاراگراف‌ها در مقالات
تنظیم موقعیت متن در دکمه‌ها و عناصر رابط کاربری
ایجاد طرح‌بندی‌های متوازن در بخش‌های مختلف صفحه
ترازبندی محتوای سلول‌های جدول

نمونه کدهای مرتبط

در ادامه چند مثال کاربردی از text align را مشاهده می‌کنید:

مثال ۱: ترازبندی پایه

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

.ltr-text {
  text-align: left;
}

.centered-text {
  text-align: center;
}

.justified-text {
  text-align: justify;
}

مثال ۲: ترازبندی در عناصر مختلف

h1 {
  text-align: center;
}

article p {
  text-align: justify;
}

.button {
  text-align: center;
}

table td {
  text-align: right;
}

مثال ۳: استفاده در طراحی ریسپانسیو

@media (max-width: 768px) {
  .responsive-text {
    text-align: center;
  }
}

نکات کلیدی در استفاده از text align

محدودیت کاربرد: این ویژگی فقط بر محتوای متنی و inline تأثیر می‌گذارد و بر عناصر block-level تأثیری ندارد.
ارث‌بری: `text-align` به عناصر فرزند به ارث می‌رسد، مگر اینکه برای آن‌ها مقدار متفاوتی تعریف شود.
تفاوت با `direction`: این ویژگی با ویژگی `direction` که جهت نوشتار را تعیین می‌کند متفاوت است.
پشتیبانی مرورگرها: این ویژگی توسط تمام مرورگرهای مدرن به طور کامل پشتیبانی می‌شود.

ترازبندی مناسب متن می‌تواند تجربه کاربری را به میزان قابل توجهی بهبود بخشد. با استفاده صحیح از `text-align` می‌توانید صفحات وب حرفه‌ای‌تری طراحی کنید که هم از نظر زیبایی‌شناسی و هم از نظر کاربردی در سطح بالایی قرار دارند

خلاصه درس

تمرین

مشاهده پاسخ

توسعه دهندگان

امیر عبدی زاده