تنظیم چیدمان متن با text-align در CSS
یکی از پرکاربردترین ویژگی‌های CSS برای کنترل نمایش متون، text-align است که جهت چینش افقی محتوای متنی را تعیین می‌کند. این ویژگی به طراحان وب اجازه می‌دهد تا متن‌ها را در عناصر مختلف به صورت حرفه‌ای تراز کنند.
مقادیر اصلی text-align
این ویژگی چهار مقدار کلیدی دارد که هر کدام کاربرد خاصی در طراحی صفحات وب دارند:
- right: تراز متن به سمت راست (مناسب برای زبان‌های راست‌به‌چپ مانند فارسی)
- left: تراز متن به سمت چپ (مناسب برای زبان‌های چپ‌به‌راست)
- center:居中 سازی متن در وسط عنصر والد
- justify: تراز متن به صورت یکنواخت در عرض مشخص
| مقدار |
کاربرد |
| right |
مناسب برای عناوین و متن‌های فارسی |
| justify |
ایجاد ظاهر مجله‌ای برای پاراگراف‌های طولانی |
مقدار justify ممکن است در برخی مرورگرها مشکلاتی ایجاد کند و بهتر است با احتیاط استفاده شود.
کاربردهای پیشرفته
ویژگی text-align فقط برای متن‌های ساده کاربرد ندارد، بلکه می‌توان از آن برای:
- ترازبندی دکمه‌ها در نوار ابزار
- تنظیم موقعیت عناصر درون خطی (inline) درون بلوک‌های والد
- ایجاد طرح‌بندی‌های ساده بدون نیاز به Flexbox یا Grid
برای یادگیری تکنیک‌های پیشرفته‌تر می‌توانید به text align در css مراجعه کنید.
نکته فنی: ویژگی text-align بر روی عناصر block یا inline-block اعمال می‌شود و روی عناصر inline تأثیری ندارد.
مثال‌های عملی
در کد زیر نمونه‌ای از کاربرد text-align را مشاهده می‌کنید:
.article {
text-align: right;
padding: 20px;
}
.title {
text-align: center;
color: #e74c3c;
}
همانطور که مشاهده می‌کنید، با ترکیب text-align با سایر ویژگی‌های CSS می‌توان به نتایج حرفه‌ای در طراحی وب دست یافت.
