Elementlarni gorizontal va vertikal ravishda tekislash mumkin turli yo'llar bilan. Usulni tanlash elementning turiga (blok yoki inline), uning joylashish turiga, o'lchamiga va boshqalarga bog'liq.

1. Blok / sahifaning o'rtasiga gorizontal tekislash

1.1. Agar blokning kengligi bo'lsa:

div (kengligi: 300px; hoshiya: 0 avtomatik; /*elementni asosiy blok ichida gorizontal ravishda markazlashtiring*/)

Agar siz chiziqli elementni shu tarzda tekislashni istasangiz, uni quyidagi ko'rinishga o'rnatishingiz kerak: blok;

1.2. Agar blok boshqa blok ichiga o'rnatilgan bo'lsa va uning uchun kenglik o'rnatilmagan bo'lsa:

.wrapper(matnni tekislash: markaz;)

1.3. Agar blokning kengligi bo'lsa va uni asosiy blokning o'rtasiga o'rnatish kerak bo'lsa:

.wrapper (joylashuv: nisbiy; /*ota-ona qutisini nisbiy holatga o'rnating, shunda biz qutini keyinroq uning ichiga joylashtira olamiz*/) .box (kenglik: 400px; joy: mutlaq; chap: 50%; chet-chap: - 200px; / *blokni kengligining yarmiga teng masofaga chapga siljiting*/ )

1.4. Agar bloklar uchun kenglik o'rnatilmagan bo'lsa, siz asosiy o'rash bloki yordamida markazlashtirishingiz mumkin:

.wrapper (matnni tekislash: markaz; /*blok mazmunini markazlashtirish*/) bloklar orasiga chekinish*/ )

2. Vertikal tekislash

2.1. Agar matn bitta qatorni egallasa, masalan, tugmalar va menyu elementlari uchun:

.tugmasi (balandligi: 50px; chiziq balandligi: 50px; )

2.2. Blokni asosiy blok ichida vertikal ravishda tekislash uchun:

.wrapper (joylashuvi: nisbiy;) .box (balandligi: 100px; pozitsiyasi: mutlaq; tepasi: 50%; cheti: -50px 0 0 0; )

2.3. Jadval turi bo'yicha vertikal tekislash:

.wrapper ( displey: jadval; kengligi: 100%; ) .box ( displey: jadval-hujayra; balandlik: 100px; matnni tekislash: markaz; vertikal tekislash: o'rta; )

2.4. Agar qutida kenglik va balandlik o'rnatilgan bo'lsa va ota-ona qutisiga markazlashtirilishi kerak bo'lsa:

.wrapper (pozitsiya: nisbiy; ) .box (balandlik: 100px; eni: 100px; pozitsiya: mutlaq; tepa: 0; oʻng: 0; pastki: 0; chap: 0; chekka: avtomatik; toʻlib ketish: avtomatik; /*to kontent tarqalmadi */)

2.5. CSS3 konvertatsiyasi yordamida sahifa/blok markaziga mutlaq joylashish:

elementning o'lchamlari bo'lsa

div (kengligi: 300px; /*blok kengligini belgilang*/ balandligi:100px; /*blok balandligini belgilang*/ transform: translate(-50%, -50%); pozitsiya: mutlaq; tepa: 50%; chap: 50%;)

agar elementning o'lchamlari bo'lmasa va bo'sh bo'lmasa

h1 (chekka: 0; o'zgartirish: tarjima qilish(-50%, -50%); pozitsiya: mutlaq; tepa: 50%; chap: 50%; )

css,

HTML

O'ylaymanki, sizlarning ko'pchiligingiz maket ishlarini bajargan bo'lsangiz, elementlarni vertikal ravishda tekislash zarurligiga duch keldingiz va elementni markazga tekislashda qanday qiyinchiliklar paydo bo'lishini bilasiz.

Ha, uchun vertikal tekislash CSS ko'p qiymatlarga ega bo'lgan vertikal tekislashning maxsus xususiyatiga ega. Biroq, amalda u kutilganidek ishlamaydi. Keling, buni tushunishga harakat qilaylik.

Keling, quyidagi yondashuvlarni taqqoslaylik. Quyidagi bilan moslashish:

• jadvallar,
• chekinish,
• chiziq balandligi,
• cho'zish,
• salbiy marja,
• aylantirish,
• psevdo element
• flexbox.

Misol tariqasida quyidagi misolni ko'rib chiqing.

Ikkita div elementi mavjud, ulardan biri ikkinchisining ichiga joylashtirilgan. Keling, ularga tegishli sinflarni beraylik - tashqi va ichki .

Maqsad ichki elementni tashqi elementning markaziga moslashtirishdir.

Boshlash uchun tashqi va ichki blokning o'lchamlarini ko'rib chiqing ma'lum. Ichki elementga displey: inline-block va matnni tekislash: markazga va vertikal-align: o‘rtasini tashqi elementga qo‘shamiz.

Yodda tutingki, tekislash faqat inline yoki inline-block displey rejimiga ega elementlarga tegishli.

Keling, bloklarning o'lchamlarini, shuningdek, ularning chegaralarini ko'rish uchun fon ranglarini o'rnatamiz.

Tashqi (kengligi: 200px; balandlik: 200px; matnni tekislash: markaz; vertikal tekislash: oʻrta; fon rangi: #ffc; ) .ichki (displey: inline-blok; en: 100px; balandlik: 100px; fon rangi : #fcc;)
Uslublarni qo'llaganimizdan so'ng, biz buni ko'ramiz ichki birlik gorizontal ravishda hizalanadi, lekin vertikal emas:
http://jsfiddle.net/c1bgfffq/

Nima uchun bu sodir bo'ldi? Gap shundaki, vertikal tekislash xususiyati hizalanishga ta'sir qiladi uning mazmuni emas, balki elementning o'zi(jadval xujayralariga qo'llanilishi bundan mustasno). Shuning uchun, bu xususiyatni qo'llash tashqi element hech narsa bermadi. Bundan tashqari, ushbu xususiyatni ichki elementga qo'llash ham hech narsa qilmaydi, chunki inline-bloklar qo'shni bloklar bilan vertikal ravishda tekislanadi va bizning holatlarimizda bizda bitta inline-blok mavjud.

Ushbu muammoni hal qilish uchun bir nechta texnikalar mavjud. Keling, quyida ularning har birini batafsil ko'rib chiqaylik.

Jadval bilan tekislash

Aqlga keladigan birinchi yechim tashqi blokni bitta hujayrali stol bilan almashtirishdir. Bunday holda, hizalama hujayraning tarkibiga, ya'ni ichki blokga qo'llaniladi.

http://jsfiddle.net/c1bgfffq/1/

Aniq minus bu qaror- semantika nuqtai nazaridan, tekislash uchun jadvallardan foydalanish noto'g'ri. Ikkinchi kamchilik shundaki, jadval yaratish uchun tashqi blok atrofida yana bitta element qo'shish kerak.

Birinchi minus jadval va td teglarini div bilan almashtirish va CSS-da jadvalni ko'rsatish rejimini o'rnatish orqali qisman olib tashlanishi mumkin.

.outer-wrapper ( displey: table; ) .outer ( displey: table-cell; )
Shunga qaramay, tashqi blok hali ham barcha keyingi oqibatlarga olib keladigan jadval bo'lib qoladi.

To'ldirish bilan tekislash

Agar ichki va tashqi blokning balandliklari ma'lum bo'lsa, hizalanishni ichki blokning vertikal yostig'i yordamida quyidagi formuladan foydalanib o'rnatish mumkin: (H tashqi - H ichki) / 2.

Tashqi (balandligi: 200px; ) .ichki (balandligi: 100px; cheti: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Yechimning nochorligi shundaki, u ikkala blokning balandligi ma'lum bo'lgan cheklangan hollardagina qo'llaniladi.

Chiziq balandligi bilan tekislash

Agar siz ichki blok matnning bir qatordan ko'p bo'lmasligi kerakligini bilsangiz, unda siz line-height xususiyatidan foydalanishingiz va uni tashqi blokning balandligiga tenglashtirishingiz mumkin. Ichki blokning mazmuni ikkinchi qatorga o'ralmasligi kerakligi sababli, oq bo'shliqni qo'shish tavsiya etiladi: nowrap va overflow: yashirin qoidalar ham.

Tashqi (balandlik: 200px; chiziq balandligi: 200px; ) .ichki (oq boʻshliq: nowrap; toʻlib ketish: yashirin; )
http://jsfiddle.net/c1bgfffq/12/

Agar siz ichki blok uchun satr balandligi qiymatini bekor qilsangiz va quyidagi qoidalarni qo'shsangiz, ko'p qatorli matnni tekislash uchun ushbu usuldan foydalanish mumkin: inline-block va vertikal-align: middle .

Tashqi (balandligi: 200px; chiziq balandligi: 200px; ) .ichki (chiziq balandligi: normal; displey: inline-blok; vertikal tekislash: oʻrta; )
http://jsfiddle.net/c1bgfffq/15/

Ushbu usulning nochorligi shundaki, tashqi blokning balandligi ma'lum bo'lishi kerak.

Stretch Alignment

Bu usul tashqi blokning balandligi noma'lum bo'lsa, lekin ichki blokning balandligi ma'lum bo'lganda foydalanish mumkin.

Buning uchun sizga kerak:

1. nisbiy joylashishni tashqi blokga, mutlaq joylashishni esa ichki blokga o'rnatish;
2. yuqoridagi qoidalarni qo'shing: 0 va pastki: 0 ichki blokga, buning natijasida u tashqi blokning butun balandligiga cho'ziladi;
3. ichki blokning vertikal to'ldirilishi uchun avtomatik qiymatni o'rnating.

.outer (pozitsiya: nisbiy; ) .ichki (balandlik: 100px; pozitsiya: mutlaq; tepa: 0; pastki: 0; chekka: avtomatik 0; )
http://jsfiddle.net/c1bgfffq/4/

Ushbu texnikaning mohiyati shundan iboratki, cho'zilgan va mutlaqo joylashtirilgan blok uchun balandlikni o'rnatish, agar ularning qiymati avtomatik ga o'rnatilgan bo'lsa, brauzer vertikal to'ldirishni teng nisbatda hisoblashiga olib keladi.

Salbiy chekka tepasi bilan tekislash

Bu usul keng tarqalgan va juda tez-tez qo'llaniladi. Avvalgi kabi, u tashqi blokning balandligi noma'lum bo'lsa, lekin ichki qismning balandligi ma'lum bo'lganda qo'llaniladi.

Siz tashqi blokni nisbiy joylashuvga, ichki blokni esa mutlaq joylashuvga o'rnatishingiz kerak. Keyin ichki qutini tashqi quti ustki qismi balandligining yarmidan pastga siljitishingiz kerak: 50% va uni o'z balandligining yarmiga ko'taring -H ichki / 2.

Tashqi (joylashuvi: nisbiy; ) .ichki (balandligi: 100px; pozitsiyasi: mutlaq; tepasi: 50%; cheti-yuqori: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Ushbu usulning nochorligi shundaki, ichki blokning balandligi ma'lum bo'lishi kerak.

Transformatsiya bilan moslashish

Bu usul avvalgisiga o'xshaydi, lekin u ichki blokning balandligi noma'lum bo'lganda qo'llanilishi mumkin. Bunday holda, piksellarda salbiy to'ldirishni o'rnatish o'rniga, transform xususiyatidan foydalanishingiz va translateY funksiyasi va -50% qiymatidan foydalanib, ichki qutini yuqoriga ko'tarishingiz mumkin.

Tashqi (pozitsiya: nisbiy; ) .ichki (pozitsiya: mutlaq; tepa: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Nima uchun oldingi usulda qiymatni foiz sifatida belgilash mumkin emas edi? Marja xususiyatining foiz qiymatlari asosiy elementga nisbatan bo'lganligi sababli, 50% qiymati tashqi quti balandligining yarmiga teng bo'ladi va biz ichki qutini o'z balandligining yarmiga ko'tarishimiz kerak. Transformatsiya xususiyati aynan shu uchun.

Ushbu usulning nochorligi shundaki, agar ichki blok mutlaq joylashuvga ega bo'lsa, uni qo'llash mumkin emas.

Flexbox bilan moslashtirish

Vertikal tekislashning eng zamonaviy usuli bu Flexible Box Layout (xalq orasida Flexbox deb nomlanuvchi) dan foydalanishdir. Ushbu modul sahifadagi elementlarning joylashishini moslashuvchan tarzda boshqarishga imkon beradi, ularni deyarli hamma joyda joylashtiradi. Flexbox uchun markazni tekislash juda oddiy vazifadir.

Tashqi blokni ko'rsatish uchun sozlash kerak: flex va ichki blokni margin: auto ga o'rnatish kerak. Va bu hammasi! Chiroyli, shunday emasmi?

Tashqi (displey: flex; kenglik: 200px; balandlik: 200px; ) .ichki (kenglik: 100px; chekka: avtomatik; )
http://jsfiddle.net/c1bgfffq/14/

Ushbu usulning nochorligi shundaki, Flexbox faqat zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi.

Qaysi yo'lni tanlash kerak?

Muammoning bayonidan kelib chiqish kerak:

• Matnni vertikal tekislash uchun vertikal to'ldirish yoki chiziq balandligi xususiyatidan foydalanish yaxshiroqdir.
• Balandligi ma'lum bo'lgan mutlaq joylashtirilgan elementlar uchun (masalan, piktogramma) manfiy chekka tepaga yondashuv idealdir.
• Blokning balandligi noma'lum bo'lgan murakkabroq holatlar uchun psevdoelement yoki transform xususiyatidan foydalanish kerak.
• Xo'sh, agar siz IE ning eski versiyalarini qo'llab-quvvatlamaslik uchun omadingiz bo'lsa, albatta Flexbox yaxshiroqdir.

Ko'pincha vazifa blokni sahifaning / ekranning o'rtasiga tekislash va hatto java skriptisiz, qattiq o'lchamlarni yoki salbiy chekinishlarni o'rnatmasdan, agar blok uning o'lchamidan oshib ketgan bo'lsa, aylantirish panellari ota-onada ishlashi uchun. Blokni ekranning o'rtasiga qanday tekislash haqida tarmoqda juda ko'p monoton misollar mavjud. Qoida tariqasida, ularning aksariyati bir xil printsiplarga asoslanadi.

Quyida muammoni hal qilishning asosiy usullari, ularning ijobiy va salbiy tomonlari keltirilgan. Misollarning mohiyatini tushunish uchun men ko'rsatilgan havolalardagi misollarda Natija oynasining balandligi / kengligini kamaytirishni tavsiya qilaman.

Variant 1. Salbiy to'ldirish.

Joylashtirish blok yuqori va chap atributlarni 50% ga oshiring va blokning balandligi va kengligini oldindan bilib, o'lchamning yarmiga teng bo'lgan salbiy chegarani o'rnating. blok. Katta minus bu variant siz salbiy indentlarni hisoblashingiz kerak. Xuddi shu tarzda blok aylantirish paneli muhitida unchalik to'g'ri ishlamaydi - u shunchaki kesilgan, chunki u salbiy chiziqqa ega.

Ota-ona (kenglik: 100%; balandlik: 100%; joylashuv: mutlaq; tepa: 0; chap: 0; toʻldirish: avtomatik; ) .block (kenglik: 250px; balandlik: 250px; joy: mutlaq; tepa: 50%; chap : 50%; hoshiya: -125px 0 0 -125px; img (maksimal kenglik: 100%; balandlik: avtomatik; displey: blok; chekka: 0 avtomatik; chegara: yoʻq; ) )

Variant 2: Avtomatik chekinish.

Kamroq tarqalgan, lekin birinchisiga o'xshash. Uchun blok kenglik va balandlikni o'rnating, yuqori o'ng pastki chap atributlarni 0 ga joylashtiring va chekka avtomatik o'rnating. Ushbu parametrning afzalligi - ishlaydigan aylantirish panellari ota-ona, agar ikkinchisi 100% kenglik va balandlikka ega bo'lsa. Ushbu usulning salbiy tomoni qattiq o'lchamdir.

Ota-ona (kenglik: 100%; balandlik: 100%; pozitsiya: mutlaq; tepa: 0; chap: 0; toʻldirish: avtomatik; ) .block (kenglik: 250px; balandlik: 250px; joy: mutlaq; tepa: 0; oʻng: 0; pastki: 0; chap: 0; chekka: avtomatik; img (maksimal kenglik: 100%; balandlik: avtomatik; displey: blok; chekka: 0 avtomatik; chegara: yo'q; ) )

Variant 3. Jadval.

so'raymiz ota-ona jadval uslublari, hujayra ota-ona Matnni markazga moslashtirish. LEKIN blok inline blok modelini o'rnating. Kamchiliklari ishlamaydigan aylantirish panellari va umuman, stolning "taqlid qilish" estetikasi emas.

Ota (kenglik: 100%; balandlik: 100%; displey: jadval; joylashuv: mutlaq; tepa: 0; chap: 0; > .inner ( displey: jadval-hujayra; matnni tekislash: markaz; vertikal tekislash: oʻrta; ) ) .block ( displey: inline-block; img ( displey: blok; chegara: yo‘q; ) )

Ushbu misolga varaq qo'shish uchun strukturaga yana bitta element qo'shishingiz kerak bo'ladi.
Misol: jsfiddle.net/serdidg/fk5nqh52/3 .

Variant 4. Pseudo-element.

Ushbu parametr oldingi usullarda sanab o'tilgan barcha muammolardan mahrum, shuningdek, asl vazifalarni hal qiladi. Gap bor ota-ona uslublarni o'rnatish psevdo element oldin, ya'ni 100% balandlik, markazni tekislash va inline quti modeli. Xuddi shu bilan blok inline blokning modelini qo'ying, markazni tekislang. Kimga blok ostiga tushmadi psevdo element birinchisining o'lchamlari dan katta bo'lganda ota-ona, belgilang ota-ona white-space: nowrap va font-size: 0, shundan keyin y blok ushbu uslublarni quyidagi bilan bekor qiling - bo'sh joy: normal. DA bu misol font-size: 0 orasidagi bo'shliqni olib tashlash uchun kerak ota-ona va blok kodni formatlash bilan bog'liq. Bo'shliqni boshqa yo'llar bilan olib tashlash mumkin, ammo bunga yo'l qo'ymaslik yaxshiroqdir.

Ota (kenglik: 100%; balandlik: 100%; joy: mutlaq; tepa: 0; chap: 0; toʻldirish: avtomatik; boʻsh joy: nowrap; matnni tekislash: markaz; shrift oʻlchami: 0; &:oldin ( balandlik: 100%; displey: inline-blok; vertikal tekislash: o'rta; kontent: ""; ) ) .block ( displey: inline-block; oq bo'shliq: normal; vertikal tekislash: o'rta; matnni tekislash: chapga ; img (ekran: blok; chegara: yo'q; ) )

Yoki ota-ona butun sahifani emas, balki faqat oynaning balandligi va kengligini egallashini xohlasangiz:

Ota-ona (pozitsiya: qattiq; yuqori: 0; o'ng: 0; pastki: 0; chap: 0; to'ldirish: avtomatik; bo'sh joy: nowrap; matnni tekislash: markaz; shrift o'lchami: 0; &: oldin ( balandlik: 100%; displey: inline-blok; vertikal tekislash: o'rta; kontent: ""; ) ) .block (displey: inline-blok; oq bo'shliq: normal; vertikal tekislash: o'rta; matnni tekislash: chap; img (ekran: blok; chegara: yo'q; ) )

Variant 5. Flexbox.

Eng oddiy va eng oqlangan usullardan biri flexbox-dan foydalanishdir. Bu keraksiz tana harakatlarini talab qilmaydi, sodir bo'layotgan voqealarning mohiyatini juda aniq tasvirlaydi va yuqori moslashuvchanlikka ega. Ushbu usulni tanlashda eslash kerak bo'lgan yagona narsa IE-ni 10-versiyadan boshlab qo'llab-quvvatlashdir. caniuse.com/#feat=flexbox

Ota-ona (kenglik: 100%; balandlik: 100%; joylashuv: qattiq; tepa: 0; chap: 0; displey: egiluvchan; align-elementlar: markaz; align-content: markaz; justify-content: markaz; overflow: auto; ) .block (fon: #60a839; img (displey: blok; chegara: yo‘q; ) )

Variant 6. Transformatsiya.

Agar biz struktura bilan cheklangan bo'lsak va asosiy elementni boshqarishning hech qanday usuli yo'q bo'lsa, mos keladi, lekin blokni qandaydir tarzda tekislash kerak. Translate() css funksiyasi yordamga keladi. 50% mutlaq pozitsiya qiymati qutining yuqori chap burchagini aynan markazga joylashtiradi, so'ngra manfiy tarjima qiymati qutini o'z o'lchamlariga nisbatan siljitadi. E'tibor bering, salbiy ta'sirlar loyqa qirralar yoki shrift uslubi ko'rinishida paydo bo'lishi mumkin. Shuningdek, shunga o'xshash usul java-skript yordamida blokning o'rnini hisoblash bilan bog'liq muammolarga olib kelishi mumkin "a. Ba'zan, kenglikning 50% yo'qotilishini qoplash uchun. css foydalanish chap xususiyatga blok uchun o'rnatilgan qoida yordam berishi mumkin: margin-right: -50%; .

Ota-ona (kenglik: 100%; balandlik: 100%; joylashuv: qattiq; tepa: 0; chap: 0; toʻldirish: avtomatik; ) .block (pozitsiya: mutlaq; tepa: 50%; chap: 50%; transform: translate( -50%, -50%; img (displey: blok; ) )

Variant 7. Tugma.

Foydalanuvchi opsiyasi qayerda blok tugma tegiga o'ralgan. Tugma uning ichidagi hamma narsani, ya'ni inline va blok-liniya (inline-blok) modelining elementlarini markazlashtirish qobiliyatiga ega. Men buni amalda tavsiya qilmayman.

Ota-ona (kenglik: 100%; balandlik: 100%; pozitsiya: mutlaq; tepa: 0; chap: 0; toʻldirish: avtomatik; fon: yoʻq; chegara: yoʻq; kontur: yoʻq; ) .block ( displey: inline-block; img (displey: blok;; chegara: yo'q; ) )

Bonus

4-variant g'oyasidan foydalanib, siz chekkalarni o'rnatishingiz mumkin blok, va bir vaqtning o'zida ikkinchisi aylantirish panellari muhitida etarli darajada ko'rsatiladi.
Misol: jsfiddle.net/serdidg/nfqg9rza/2 .

Shuningdek, siz rasmni markazda va agar rasm kattaroq bo'lsa, tekislashingiz mumkin ota-ona, uni o'lchamiga qarab o'lchang ota-ona.
Misol: jsfiddle.net/serdidg/nfqg9rza/3 .
Katta rasmga misol:

Bugun, aziz o'quvchi, biz blokda vertikal hizalanish muammosi bilan shug'ullanamiz div.

Siz ajoyib CSS xususiyati mavjudligi haqida allaqachon bilgan bo'lsangiz kerak vertikal tekislash. Va Xudoning o'zi bizga bu xususiyatni vertikal tekislash uchun ishlatishni buyurdi (u bejiz shunday o'z-o'zidan tushunarli nomga ega emas).

Muammoni shakllantirish: O'zgaruvchan balandlik blokining tarkibini vertikalga nisbatan markazda tekislash kerak.

Endi muammoni hal qilishni boshlaylik.

Shunday qilib, bizda blok bor, uning balandligi o'zgarishi mumkin:

Aqlga keladigan birinchi narsa quyidagi nayrangni qilishdir:

Bu iboraga ishonish uchun barcha asoslar bor Kontentni bloklash div konteynerining markaziy balandligiga to'g'ri keladi.

Ammo u erda yo'q edi! Bu yo'l bilan biz kutilgan markazga mos kela olmaymiz. Nega? Hammasi to'g'ri bo'lib tuyuldi. Ma'lum bo'lishicha, bu erda ushlash: mulk vertikal tekislash faqat jadval kataklari tarkibini tekislash yoki qatordagi elementlarni bir-biriga nisbatan tekislash uchun ishlatilishi mumkin.

Jadval xujayrasi ichidagi hizalanishga kelsak, menimcha, hamma narsa aniq. Lekin men boshqa ishni inline elementlar bilan tushuntiraman.

Inline elementlarning vertikal tekislanishi

Aytaylik, sizda inline teglar bilan uzilgan matn qatori bor qismlarga bo'linadi:

Siz kutib oladi bo'lak matn!

Inline teg - bu tashqi ko'rinishi kontentni yangi qatorga o'tkazishga olib kelmaydigan konteyner.

Blok tegining harakati konteyner tarkibini yangi qatorga o'tkazishga olib keladi.

blok tegidir. Agar matn bo'laklarini bloklarga qo'shsak

, keyin ularning har biri yangi qatorda bo'ladi. Belgidan foydalanish , qaysi, farqli o'laroq

, inline bo'lsa, konteynerlarni yangi qatorga o'rash bo'lmaydi, barcha konteynerlar bir xil chiziqda qoling.

Idish matnning bir qismini maxsus formatlash (rang bilan ta'kidlash, boshqa shriftda va boshqalar) o'rnatishda foydalanish qulay.

Konteynerlar uchun quyidagi CSS xususiyatlarini qo'llang:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Natijada, matn qatori quyidagicha ko'rinadi:

Bu ichki elementlarning vertikal hizalanishi va CSS xususiyatidan boshqa narsa emas vertikal tekislash bu vazifani a'lo darajada bajara oladi.

Biz biroz chetga chiqamiz, endi asosiy vazifamizga qaytamiz.

Div konteynerida vertikal tekislash

Nima bo'lishidan qat'iy nazar, div konteyneri ichida tekislash uchun biz xususiyatdan foydalanamiz vertikal tekislash. Aytganimdek, bu xususiyatdan inline elementlarni tekislashda foydalanish mumkin (biz bu ishni yuqorida batafsil muhokama qildik va u div konteynerida tekislash uchun bizga mos kelmaydi); faktdan foydalanishgina qoladi vertikal tekislash jadval hujayralari uchun ishlaydi.

Biz undan qanday foydalanishimiz mumkin? Bizda stol yo'q, biz div konteyner bilan ishlayapmiz.

Ha, bu juda oddiy bo'lib chiqdi.

CSS xususiyati ko'rsatish div blokimizni jadval katakchasiga aylantirish imkonini beradi, bu oson va tabiiy ravishda amalga oshirilishi mumkin:

Keling, div sinfini o'tkazaylik textalign:

Ushbu blok uchun quyidagi CSS xususiyatini belgilang:

Matnni tekislash (ko'rsatish: jadval-hujayra; )

Ushbu CSS ko'rsatmasi mo''jizaviy tarzda bizning div blokimizni vizual ravishda hech qanday tarzda o'zgartirmasdan jadval katakchasiga aylantiradi. Va jadval xujayrasi uchun biz xususiyatni qo'llashimiz mumkin vertikal tekislash to'liq va kerakli vertikal markazlashtirish ishlaydi.

Biroq, hamma narsa oddiygina tugamaydi. Bizda ajoyib IE brauzeri ham bor. Mulk bilan qanday ishlashni bilmaydi displey: jadval-hujayra(Men sizga htmlbook.ru saytidagi turli brauzerlarda ushbu CSS xususiyatining ishlashini ko'rsatadigan jadval bilan tanishishingizni taklif qilaman). Shuning uchun biz turli xil fokuslarga o'tishimiz kerak bo'ladi.

Barcha brauzerlar uchun div konteynerida tekislashni amalga oshirishning ko'plab usullari mavjud:

• Qo'shimcha yordamchi div konteyneridan foydalanish usuli
• Ifodani ishlatish usuli. Bu blok balandligini ayyorlik bilan hisoblash bilan bog'liq. Siz JavaScript-ni bilmasdan qila olmaysiz.
• Line-height xususiyatidan foydalanish. Ushbu usul faqat ma'lum balandlikdagi blokda vertikal tekislash uchun javob beradi va shuning uchun umumiy holatda qo'llanilmaydi.
• IE brauzerida mutlaq va nisbiy kontent ofsetidan foydalanish. Bu usul menga eng tushunarli va sodda ko'rinadi. Bundan tashqari, u o'zgaruvchan balandlikdagi div konteyner uchun amalga oshirilishi mumkin. Biz bu haqda batafsilroq to'xtalamiz.

Siz tushunganingizdek, biz mulkni noto'g'ri tushunish bilan bog'liq bo'lgan IEda vertikal tekislash muammosini hal qilishimiz kerak. displey: jadval-hujayra(na IE6, na IE7, na IE8 bu mulk bilan tanish emas). Shuning uchun, foydalanish shartli izoh IE oilasining brauzerlari uchun biz boshqa CSS xususiyatlarini belgilaymiz.

Shartli izoh

Dizaynni ko'rish:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

shartli izoh deyiladi (ehtiyot bo'ling, shartli izohning turi berilgan misolga to'liq mos kelishi kerak, bo'sh joygacha).

Bunday shartli izohdagi ko'rsatmalar faqat brauzer tomonidan talqin qilingan taqdirdagina bajariladi berilgan kod, IE oilasiga tegishli.

Shunday qilib, shartli izohdan foydalanib, biz IE dan tashqari barcha brauzerlardan kod qismini yashirishimiz mumkin.

Muammoning yechimi

Ushbu maydanoz tufayli biz HTML kodimizni ikkita qo'shimcha konteyner bilan ta'minlashimiz kerak. Bizning matnli blokimiz shunday ko'rinadi:

Class konteyner div uchun textalign uning mazmunini hamma uchun vertikal ravishda tekislaydigan CSS xususiyatlarini o'rnating oddiy brauzerlar(IE dan tashqari, albatta):

Displey: jadval-hujayra; vertikal tekislash: o'rta;

Va blokning kengligi va balandligini o'rnatadigan yana ikkita xususiyat:

Kengligi: 500px; balandligi: 500px;

Bu barcha brauzerlarda konteyner tarkibini vertikalga nisbatan markazda tekislash uchun etarli. IE bundan mustasno.

Endi biz hizalama bilan bog'liq xususiyatlarni qo'shishni boshlaymiz IE oilasi brauzerlari uchun(ular uchun biz qo'shimcha bloklardan foydalanganmiz div va oraliq):

Tegga murojaat qilish div sinf bloki ichida textalign. Buning uchun avval sinf nomini, so'ngra bo'sh joy bilan ajratilgan holda biz nazarda tutayotgan tegni ko'rsatish kerak.

Matnli div (pozitsiya: mutlaq; tepa: 50%; )

Bu konstruksiya quyidagilarni anglatadi: sinf bilan blok ichidagi barcha div teglar uchun textalign sanab o'tilgan xususiyatlarni qo'llang.

Shunga ko'ra, blok uchun o'rnatilgan uslublar textalign o'zgartiriladi:

Matnni tekislash (ekran: jadval-hujayra; vertikal tekislash: o'rta; kenglik: 500 piksel; balandlik: 500 piksel; joylashuv: nisbiy; )

Endi matn maydonining yuqori chap nuqtasi 50% pastga siljiydi.

Nima bo'layotganini tushuntirish uchun men rasm chizdim:

Suratdan ko'rinib turibdiki, biz biroz oldinga siljishga erishdik. Lekin bu hammasi emas! Sariq blokning yuqori chap nuqtasi haqiqatan ham asosiy (binafsha) blokdan 50% pastga siljigan. Lekin bizga kerak bo'lgan narsa - binafsha blokning balandligining ellik foizida sariq blok markazi, uning yuqori chap nuqtasi emas.

Endi teg ketadi oraliq va uning nisbiy joylashuvi:

Matnni tekislash oralig'i (joylashuvi: nisbiy; tepasi: -50%; )

Shunday qilib, biz sariq blokni boshlang'ich pozitsiyasiga nisbatan balandligining 50% ga o'tkazdik. Siz tushunganingizdek, sariq blokning balandligi markazlashtirilgan tarkibning balandligiga teng. Va oxirgi span operatsiyasi bizning tarkibimizni binafsha qutining o'rtasiga qo'yadi. Xayr!

Keling, bir oz Shaman qilaylik

Avvalo, biz maydanozni barcha oddiy brauzerlardan yashirishimiz va IE uchun ochishimiz kerak. Buni, albatta, shartli izoh yordamida amalga oshirish mumkin, biz u bilan tanishganimiz bejiz emas edi:

Kichkina muammo bor. Agar markazlashtirilgan kontent juda baland bo'lsa, bu noxush oqibatlarga olib keladi: qo'shimcha vertikal aylantirish balandligi mavjud.

Muammolarni bartaraf etish: mulkni kiritish kerak toshib ketish: yashirin blok textalign.

Mulk bilan batafsil tanishib chiqing toshib ketish ichida mumkin.

Blok uchun CSS ko'rsatmalarining yakuniy ko'rinishi textalign kabi ko'rinadi:

Matnni tekislash (ekran: jadval-hujayra; vertikal tekislash: o'rta; kenglik: 500px; balandlik: 500px; joylashuv: nisbiy; to'ldirish: yashirin; chegara: 1px qora; )

Kechirasiz, men bir muhim fikrni aytishni unutibman. Agar harakat qilishda davom etsangiz sinf blokining balandligini o'rnating textalign foiz sifatida, keyin sizda bor undan hech narsa chiqmaydi.

O'zgaruvchan balandlik blokida markazlashtirish

Ko'pincha sinf blokining balandligini o'rnatish kerak bo'ladi textalign piksellarda emas, balki asosiy blok balandligining foizi sifatida va div konteynerining tarkibini o'rtada tekislang.

Gap shundaki, buni jadval katakchasi (va sinf bloki textalign mulk tufayli stol katakchasiga aylanadi displey:jadval-hujayra).

Bunday holda, siz tashqi blokdan foydalanishingiz kerak, buning uchun CSS xususiyati ko'rsatilgan ko'rsatish: jadval va allaqachon balandlikning foiz qiymatini belgilash uchun. Keyin blok unga CSS direktivasi bilan joylashtirilgan displey:jadval-hujayra, ota-ona blokining balandligini mamnuniyat bilan meros qilib oladi.

Bizning misolimizda o'zgaruvchan balandlik blokini amalga oshirish uchun biz CSS-ni biroz tahrirlaymiz:

sinf textalign biz mulkning qiymatini o'zgartiramiz ko'rsatish bilan stol katakchasi ustida stol va hizalama direktivasini olib tashlang vertikal tekislash: o'rta. Endi biz balandlik qiymatini 500 pikseldan, masalan, 100% ga xavfsiz tarzda o'zgartirishimiz mumkin.

Shunday qilib, sinf bloki uchun CSS xususiyatlari textalign quyidagicha ko'rinadi:

Textalign(displey: jadval; kenglik: 500px; balandlik: 100%; joylashuv: nisbiy; toʻlib toshgan: yashirin; chegara: 1px qora; )

Kontentni markazlashtirishni amalga oshirish qoladi. Buning uchun div konteyneri sinf blokiga joylashtirilgan textalign(bu rasmdagi bir xil sariq blok), siz CSS xususiyatini o'rnatishingiz kerak displey:jadval-hujayra, keyin u asosiy blokdan 100% balandlikni meros qilib oladi textalign(binafsha blok). Va hech narsa bizni ichki o'rnatilgan div konteyneri tarkibini mulk bilan markazga moslashtirishga to'sqinlik qilmaydi. vertikal tekislash: o'rta.

Konteynerga joylashtirilgan div uchun CSS xususiyatlarining yana bir qo'shimcha ro'yxatini olish textalign.

Textalign div (ekran: jadval-hujayra; vertikal tekislash: o'rta; )

Bu butun hiyla. Majburiy emas, siz markazlashtirilgan tarkib bilan balandlikni o'zgartirishingiz mumkin.

O'zgaruvchan balandlik blokining vertikal hizalanishi haqida ko'proq ma'lumot olish uchun qarang.

Salom! Asoslarni o'rganishni davom ettirish HTML tili. Keling, matnni markazga, kenglik yoki qirralarga tekislash uchun nima yozish kerakligini ko'rib chiqaylik.

Ishga kirishar ekanmiz, keling, HTMLda matn markazini qanday qilib uchinchi qilishni ko'rib chiqamiz turli yo'llar bilan. Oxirgi ikkitasi to'g'ridan-to'g'ri uslublar jadvaliga bog'liq. Bu sayt sahifalariga ulangan va ularning ko'rinishini o'rnatadigan CSS fayli bo'lishi mumkin.

1-usul - to'g'ridan-to'g'ri HTML bilan ishlash

Aslida, hamma narsa juda oddiy. Quyidagi misolga qarang.

Paragrafni markazga tekislang.

Agar siz matn qismlarini boshqa yo'l bilan ko'chirmoqchi bo'lsangiz, "markaz" parametri o'rniga quyidagi qiymatlarni kiriting:

• oqlash - matnni sahifa kengligiga tekislash;
• o'ng - o'ng chetida;
• chapda - chapda.

Analogiya bo'yicha siz sarlavhalar (h1, h2), konteyner (div)dagi tarkibni ko'chirishingiz mumkin.

2 va 3-usul - uslublardan foydalanish

Yuqorida keltirilgan dizayn biroz o'zgartirilishi mumkin. Effekt bir xil bo'ladi. Buning uchun quyidagi kodni yozishingiz kerak.

Matn bloki.

Ushbu shaklda kod matn tarkibini markazlashtirish uchun to'g'ridan-to'g'ri HTMLga yoziladi.

Natijaga erishishning yana bir muqobil usuli mavjud. Siz bir nechta narsani qilishingiz kerak bo'ladi.

Qadam 1. Asosiy kodda yozing

Matn materiali.

2-qadam. Kiritilgan CSS faylga quyidagi kodni kiriting:

Rovno (matnni tekislash: markazga;)

Shuni ta'kidlaymanki, "rovno" so'zi boshqacha nomlanishi mumkin bo'lgan sinfning nomidir. Bu dasturchining ixtiyoriga qoldiriladi.

O'xshashlik bo'yicha, HTMLda siz matnni osongina markazga qo'yishingiz, uni asoslashingiz va sahifaning o'ng yoki chap tomoniga tekislashingiz mumkin. Ko'rib turganingizdek, maqsadga erishish uchun bitta variantdan uzoqda.

Faqat bir nechta savol:

• Siz notijorat axborot loyihasi bilan shug'ullanyapsizmi?
• Saytingiz yaxshi ishlashini xohlaysizmi? qidiruv tizimlari?
• Internetda daromad olishni hohlaysizmi?

Agar barcha javoblar ijobiy bo'lsa, veb-saytlarni ishlab chiqishda integratsiyalashgan yondashuvni ko'rib chiqing. Ma'lumot, ayniqsa, WordPress CMS-da ishlayotgan bo'lsa foydali bo'ladi.

Shuni ta'kidlashni istardimki, sizning shaxsiy saytlaringiz Internetda passiv yoki faol daromad olishning ko'plab variantlaridan biridir. Mening blogim faqat tarmoqdagi moliyaviy imkoniyatlar haqida.

Siz hech qachon trafik arbitraji, kopirayterlik va asosiy yoki boshqa faoliyat sohalarida ishlaganmisiz? qo'shimcha daromad masofaviy hamkorlik bilan? Siz bu va boshqa ko'p narsalarni hozir mening blogim sahifalarida topishingiz mumkin.

Oldinda men nashr etaman hali unchalik real emas foydali ma'lumotlar. Aloqada qoling. Agar xohlasangiz, Workip yangilanishlariga elektron pochta orqali obuna bo'lishingiz mumkin. Obuna shakli quyida joylashgan.