آموزش ترازبندی متن در CSS

 

ترازبندی متن(Text Alignment) و جهت متن(Text Direction) در CSS

در این مقاله، قصد داریم در مورد ویژگی های زیر صحبت کنیم:

  1. text-align
  2. text-align-last
  3. direction
  4. unicode-bidi
  5. vertical-align

ترازبندی متن در CSS

از ویژگی text-align برای ترازبندی افقی(horizontal) یک متن استفاده می شود. یک متن می تواند به صورت های زیر تراز شود:

  1. تراز از سمت چپ
  2. تراز از سمت راست
  3. تراز در وسط
  4. تراز با لبه های مستقیم در دو طرف پاراگراف ها(justified)

در مثال زیر، تراز از وسط و سمت چپ و سمت راست برای متن ها نشان داده شده است(اگر جهت متن یا همان direction از چپ به راست باشد، تراز سمت چپ، پیش فرض است و اگر جهت متن از راست به چپ باشد، تراز سمت راست، پیش فرض است):

مثال شماره 1

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
امتحان کنید

 


وقتی که ویژگی text-align بر روی "justify" تنظیم شود، تمام خط ها کشیده می شوند؛ بنابراین تمام خط ها، عرض یکسانی پیدا می کنند و margin های left و right راست(straight) می شوند(مانند مجله ها و روزنامه ها):

مثال شماره 2

div {
  text-align: justify;
}
امتحان کنید

 


ویژگی 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 استفاده کنیم:

مثال شماره 4

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
امتحان کنید

تراز عمودی متن(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]: https://css-tricks.ir

 

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.


تصویر امنیتی
تصویر امنیتی جدید

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال