تراز متن در CSS – ویژگی text-align

ویژگی text-align در CSS تراز افقی متن را مشخص می‌کند. با کمک این ویژگی می‌توانید متن را از سمت چپ، راست، وسط یا به صورت دوطرفه تراز کنید.

نحوه تعیین تراز متن و استفاده از ویژگی text-align در CSS

برای تعیین تراز متن (Text Alignment) در CSS می‌توانید مقدار موردنظر خود مانند left, right, center یا justify را مشابه با نمونه زیر به ویژگی text-align تخصیص دهید.

p {
  text-align: justify;
}

در مثال فوق، متن تمام پاراگراف ها (یا المان‌های <p>) به صورت دوطرفه (از سمت راست و چپ) تراز می‌شود.

مفهوم مقادیر رایج ویژگی text-align

در CSS، چهار مقدار رایج برای ویژگی text-align وجود دارد:

left: با کمک این مقدار، متن از سمت چپ تراز می‌شود. به عبارت بهتر در این حالت، لبه‌های سمت چپ متن روی یک خط مستقیم قرار می‌گیرند. در صورتی که جهت متن به صورت چپ به راست باشد این مقدار، مقدار پیشفرض ویژگی text-align خواهد بود. در تصویر زیر نمونه‌ای از تراز چپ یک پاراگراف در HTML را مشاهده می‌کنید.

right: با کمک این مقدار، متن از سمت راست تراز می‌شود. به عبارت بهتر در این حالت، لبه‌های سمت راست متن روی یک خط مستقیم قرار می‌گیرند. در صورتی که جهت متن به صورت راست به چپ باشد این مقدار، مقدار پیشفرض ویژگی text-align خواهد بود. در تصویر زیر نمونه‌ای از تراز راست یک پاراگراف در HTML را مشاهده می‌کنید.

center: با کمک این مقدار، متن از وسط تراز می‌شود. در این حالت، لبه‌های راست و چپ متن ناهموار خواهند بود و لزوما روی یک خط مستقیم قرار نمی‌گیرند. در تصویر زیر نمونه‌ای از تراز وسط یک پاراگراف در HTML را مشاهده می‌کنید.

justify: با کمک این مقدار، متن از دو طرف (چپ و راست) تراز می‌شود. به عبارت بهتر در این حالت، متن به شکلی کشیده می‌شود که لبه‌های سمت چپ و راست متن هرکدام روی یک خط مستقیم قرار بگیرند. در تصویر زیر نمونه‌ای از تراز دوطرفه یک پاراگراف در HTML را مشاهده می‌کنید.

بازگشت به فهرست مجموعه آموزشی CSS