Matn tekislash

CSS matn tekislash va matn yo‘nalishi

Bu bobda quyidagi xossalar haqida bilib olasiz:

Matn tekislanishi

text-align xossasi matnning gorizontal tekislanishini belgilash uchun ishlatiladi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

left — matnni chapga tekislaydi
right — matnni o‘ngga tekislaydi
center — matnni markazlaydi
justify — qatorlarni har bir qator teng kenglikka ega bo‘lishiga qadar cho‘zadi

Quyidagi misol chapga, o‘ngga va markazga tekislangan matnni ko‘rsatadi (matn yo‘nalishi chapdan-o‘ngga bo‘lsa standarti chap, o‘ngdan-chapga bo‘lsa standarti o‘ng):

Misol

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

O‘zingiz sinab ko‘ring »

text-align xossasi "justify" qilib belgilanganda har bir qator teng kenglikka ega bo‘lishiga qadar cho‘ziladi va chap hamda o‘ng chetlar to‘g‘ri bo‘ladi (jurnallar va gazetalardagidek):

Misol

div {
text-align: justify;
}

O‘zingiz sinab ko‘ring »

Oxirgi qatorni tekislash (text-align-last)

text-align-last xossasi matnning oxirgi qatori qanday tekislanishini belgilaydi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

auto — Standart qiymat. Oxirgi qator justify qilib chapga tekislanadi
left — Oxirgi qator chapga tekislanadi
right — Oxirgi qator o‘ngga tekislanadi
center — Oxirgi qator markazga tekislanadi
justify — Oxirgi qator qolgan qatorlar kabi justify qilinadi
start — Oxirgi qator qator boshida tekislanadi
end — Oxirgi qator qator oxirida tekislanadi

Misol

Uchta <p> elementida oxirgi qatorning turli tekislanishi:

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

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

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

O‘zingiz sinab ko‘ring »

Vertikal tekislash

vertical-align xossasi elementning vertikal tekislanishini belgilaydi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

baseline — Standart qiymat. Element ota elementning bazis chizig‘i bilan tekislanadi
length/% — Elementni ko‘rsatilgan uzunlik yoki foizga ko‘taradi yoki pasaytiradi
sub — Element ota elementning quyi yozuv (subscript) bazis chizig‘i bilan tekislanadi
super — Element ota elementning yuqori yozuv (superscript) bazis chizig‘i bilan tekislanadi
top — Element qatordagi eng baland elementning tepasi bilan tekislanadi
text-top — Element ota element shriftining tepasi bilan tekislanadi
middle — Element ota elementning o‘rtasiga joylashtiriladi
bottom — Element qatordagi eng past element bilan tekislanadi
text-bottom — Element ota element shriftining pastki qismi bilan tekislanadi

Misol

Matndagi rasmning vertikal tekislanishini belgilash:

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

O‘zingiz sinab ko‘ring »

Matn yo‘nalishi (direction)

direction xossasi blok-darajali element ichida matn yo‘nalishini/yozish yo‘nalishini belgilaydi.

Maslahat: Bir xil hujjatda bir nechta tilni qo‘llab-quvvatlash uchun matn o‘zgartirilishi kerakligini belgilash yoki qaytarish uchun bu xossani unicode-bidi xossasi bilan birga ishlatishingiz mumkin.

Misol

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

O‘zingiz sinab ko‘ring »

CSS matn tekislash/yo‘nalish xossalari

Xususiyat	Tavsif
direction	Matn yo‘nalishini/yozish yo‘nalishini belgilaydi
text-align	Matnning gorizontal tekislanishini belgilaydi
text-align-last	Matnning oxirgi qatorini tekislash usulini belgilaydi
unicode-bidi	Bir hujjatda bir nechta tillarni qo‘llab-quvvatlash uchun matnni bekor qilish kerakligini belgilash yoki qaytarish uchun yo‘nalish xususiyati bilan birga ishlatiladi
vertical-align	Elementning vertikal tekislanishini o‘rnatadi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish