CSS تراز متن (Text Alignment)
در این بخش با ویژگی‌های زیر آشنا خواهید شد:
text-aligntext-align-lastdirectionunicode-bidivertical-align
تراز متن (Text Alignment)
ویژگی text-align برای تعیین تراز افقی متن استفاده می‌شود. متن می‌تواند به چپ، راست، وسط یا به‌صورت تراز کامل (justify) قرار گیرد.
مثال زیر متن را به مرکز، چپ و راست تراز می‌کند (به‌طور پیش‌فرض متن‌های از چپ به راست به چپ و متن‌های از راست به چپ به راست تراز می‌شوند):
مثال
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}زمانی که ویژگی text-align روی “justify” تنظیم شود، هر خط متن کشیده می‌شود تا اینکه همه خطوط پهنای یکسانی داشته باشند و حاشیه‌های چپ و راست متن به صورت مستقیم قرار گیرند (مانند مجلات و روزنامه‌ها):
مثال
div {
text-align: justify;
}تراز خط آخر (Text Align Last)
ویژگی text-align-last نحوه تراز خط آخر متن را تعیین می‌کند.
مثال
تراز خط آخر در سه عنصر <p>:
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}جهت متن (Text Direction)
ویژگی‌های direction و unicode-bidi می‌توانند برای تغییر جهت متن یک عنصر استفاده شوند:
مثال
p {
direction: rtl;
unicode-bidi: bidi-override;
}تراز عمودی (Vertical Alignment)
ویژگی vertical-align تراز عمودی یک عنصر را تنظیم می‌کند.
مثال
تنظیم تراز عمودی یک تصویر در یک متن:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}ویژگی‌های تراز/جهت‌دهی متن در CSS
| ویژگی | توضیحات |
|---|
direction |
تعیین جهت متن/نوشتار |
text-align |
تعیین تراز افقی متن |
text-align-last |
تعیین نحوه تراز خط آخر متن |
unicode-bidi |
برای پشتیبانی از چند زبان در یک سند استفاده می‌شود |
vertical-align |
تنظیم تراز عمودی یک عنصر |
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام