آموزش ترازبندی متن در CSS
ترازبندی متن(Text Alignment) و جهت متن(Text Direction) در CSS
در این مقاله، قصد داریم در مورد ویژگی های زیر صحبت کنیم:
- text-align
- text-align-last
- direction
- unicode-bidi
- vertical-align
ترازبندی متن در CSS
از ویژگی text-align برای ترازبندی افقی(horizontal) یک متن استفاده می شود. یک متن می تواند به صورت های زیر تراز شود:
- تراز از سمت چپ
- تراز از سمت راست
- تراز در وسط
- تراز با لبه های مستقیم در دو طرف پاراگراف ها(justified)
در مثال زیر، تراز از وسط و سمت چپ و سمت راست برای متن ها نشان داده شده است(اگر جهت متن یا همان direction از چپ به راست باشد، تراز سمت چپ، پیش فرض است و اگر جهت متن از راست به چپ باشد، تراز سمت راست، پیش فرض است):
مثال شماره 1
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
امتحان کنید
وقتی که ویژگی text-align بر روی "justify" تنظیم شود، تمام خط ها کشیده می شوند؛ بنابراین تمام خط ها، عرض یکسانی پیدا می کنند و margin های left و right راست(straight) می شوند(مانند مجله ها و روزنامه ها):
ویژگی text-align-last در CSS
ویژگی text-align-last مشخص می کند که خطِ آخرِ یک متن، چگونه تراز شود.
مثال شماره 3
تراز کردنِ آخرین خطِ متن های درونِ سه عنصرِ <p>:
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
امتحان کنیدجهت متن(Text Direction) در CSS
برای تغییر دادن جهت یک عنصر، می توانیم از ویژگی های direction و unicode-bidi استفاده کنیم:
تراز عمودی متن(Vertical Alignment)
از ویژگی vertical-align برای تنظیم ترازبندی عمودی یک عنصر استفاده می شود.
مثال شماره 5
تنظیم ترازبندی عمودی(vertical alignment) برای یک تصویر در درون یک متن:
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 در کنار ویژگی direction می توان جهت و رفتار متن هایی که دارای نوشته در دوجهت هستند را کنترل کرد[1]. | unicode-bidi |
این ویژگی ترازبندی عمودی یک عنصر را مشخص می کند. | vertical-align |
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.