Matn joylashuvi

Matn joylashuvi va matn yo'nalishi

Ushbu bo'limda quyidagi xususiyatlar haqida bilib olasiz:

• text-align

• text-align-last

• direction

• unicode-bidi

• vertical align

Matn joylashuvi

text-align xususiyati matnni gorizontal shaklda joylashtirishga yordam beradi.

Matn yo chapga, yo o'ngga, yo o'rtaga joylashtirilgan, yoki butun kenglikni egallashga moslashtirilgan bo'lishi mumkin.

Quyidagi misol o'rtaga, chapga va o'ngga joylashtirilgan matnni ko'rsatadi (agar matn chapdan o'ngga o'qiladigan bo'lsa, unda matn default chapga joylashtiriladi va agar matn o'ngdan chapga o'qiladigan bo'lsa, unda matn default o'ngga joylashtiriladi):

CSS

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Agar text-align xususiyatiga "justify" beriladigan bo'lsa, har bir satr har bir qatorning kengligiga teng joylashish uchun cho'ziladi hamda chap va o'ng marginlari tekis bo'ladi (jurnal va gazetalardagi kabi):

CSS

div {
  text-align: justify;
}

W3Schools online HTML editor

text-align-last

text-align-last xususiyati matnning oxiridagi qator qanday joylashishi kerakligini belgilaydi.

CSS

Uchta <p> elementlarini joylashuvini o'zgartirish:

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

W3Schools online HTML editor

Matn yo'nalishi

direction va unicode-bidi xususiyatlari matnning yo'nalishini o'zgartirish uchun ishlatiladi:

CSS

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

W3Schools online HTML editor

Vertikal joylashtirish

vertical-align xususiyati elementni vertikal joylashtirish uchun yordam beradi:

CSS

Matn ichidagi rasm vertikal joylashtirilayapti:

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;
}

W3Schools online HTML editor

CSSning matn joylashuvi/yo'nalishi xususiyatlari

Xususiyat	Ta'rif
direction	Matn yo'nalishini belgilaydi
text-align	Matnni gorizontal joylashuvini to'g'rilashga yordam beradi
text-align-last	Matndagi oxirgi satrni joylashuvini belgilaydi.
unicode-bidi	Bitta hujjatda bir nechta tillarni qo‘llab-quvvatlash uchun matnni bekor qilish kerakligini belgilash yoki qaytarish uchun direction xususiyati bilan birga foydalaniladi.
vertical-align	Elementni vertikal joylashuvini belgilaydi