عنوان این جلسه : تراز افقی و عمودی متن در CSS | ویژگی text-align‌ در CSS - قسمت اول

در نرم‌افزارهایی مثل word حین تایپ متون می‌توانیم آنها را از سمت چپ یا راست تراز کنیم یا حتی متون را به حالت وسط چین تغییر دهیم. این خاصیت باید در متون صفحات وب‌ هم موجود باشد. برای ترازبندی متن در CSS می‌توان از ویژگی align کمک گرفت که نه تنها متن بلکه عناصر مختلف را به طور عمودی یا افقی ترازبندی کرد.

در این درس می‌خواهیم چند تکنیک مهم برای تراز کردن متون را بررسی کنیم که دانستن آنها ضروری است.

ترازبندی متن در CSS – تراز افقی
برای تراز کردن افقی متن در CSS از دستور text-align استفاده می‌شود. text-align‌ می‌تواند یکی از مقادیر زیر را شامل شود:

* left
* right
* center
* justify
* start
* end
برای نمونه در کد زیر عناصر به ترتیب چپ، وسط و راست چین شده‌اند:

.c1{
text-align: left;
}

.c2 {
text-align: center;
}

.c3 {
text-align: right;
}

این تگ کلاس c1 است.

این تگ کلاس c2 است.

این تگ کلاس c3 است.

حالت چهارم justify نام دارد . تمامی متون از ابتدا و انتها در یک خط قرار می‌گیرند. یعنی عبارت از سمت راست و چپ در یک راستا هستند.
p {
text-align: justify;
}

حالت start و end در align
دو حالت دیگر که در text-align‌ وجود دارد حالت start و end هستند که تقریبا کاربرد کمتری دارند. در حالت start متون از سمت شروع نگارش متن ترازبندی می‌شوند. یعنی اگر متون به کمک Direction راست‌چین باشند، حالت start با حالت right یکی خواهد بود. در حالت ltr که عناصر از چپ چیدمان می‌شوند start یعنی همان حالت left.

در end هم دقیقا همین حالت برقرار است. یعنی اگر عناصر صفحه راست‌چین باشند end یعنی انتهای چیدمان که همان چپ می‌شود. پس در rtl مقدار end با left یکی است.

دارکشن ( Direction‌ ) در CSS
علاوه بر تراز متون از یک سمت، باید به راست‌چین و چپ چین بودن عناصر هم دقت کنید. این موضوع قبلاً در درس نوشتن فارسی در HTML بحث شد اما برای تکمیل کردن آن در مباحث CSS‌ به یک مثال بسنده می‌کنیم. Direction‌ مشخص می‌کند که عناصر از کدام سمت در صفحه چیده شوند، از سمت راست به چپ و یا بالعکس.
p {
direction: rtl;
}

---