آموزش جامع CSS: چطور چیدمان متن را تغییر دهیم؟

ویژگی text-align در CSS نحوه تراز محتوای Inline داخل یک Container را مشخص می‌کند. از آن برای متن، لینک‌ها و سایر محتوای Inline استفاده می‌شود؛ نه برای جابه‌جا کردن خود Block در صفحه.

محتوا پنهان

1 مقادیر پرکاربرد text-align

2 چرا start و end بهتر از left و right هستند؟

3 text-align خود Element را وسط نمی‌آورد

4 در استفاده از justify دقت کنید

5 ویدیوی آموزش

مقادیر پرکاربرد text-align

start: تراز به ابتدای جهت نوشتار؛ در فارسی RTL معمولا سمت راست و در LTR سمت چپ.
end: تراز به انتهای جهت نوشتار.
center: وسط‌چین کردن محتوای Inline.
justify: کشیدن فاصله بین کلمات برای پر کردن عرض خط.

.article {
  direction: rtl;
  text-align: start;
}

چرا start و end بهتر از left و right هستند؟

در رابط‌هایی که ممکن است هم فارسی و هم انگلیسی داشته باشند، start و end با جهت نوشتار سازگار می‌شوند. در نتیجه لازم نیست برای RTL و LTR همیشه Rule جداگانه‌ای برای راست و چپ بنویسید.

text-align خود Element را وسط نمی‌آورد

text-align: center محتوای داخل Container را وسط‌چین می‌کند. اگر هدف شما وسط آوردن خود یک Block باشد، باید از ابزارهای Layout مثل Flexbox، Grid یا در بعضی سناریوها Margin استفاده کنید.

در استفاده از justify دقت کنید

Justify می‌تواند در ستون‌های باریک یا متن‌های فارسی فاصله‌های نامتوازن و فضاهای خالی آزاردهنده ایجاد کند. آن را روی محتوای واقعی، اندازه موبایل و Font نهایی تست کنید و صرفا برای پر کردن دو لبه متن از آن استفاده نکنید.