CSS vertikal tekislash. Mutlaq joylashish va cho'zish. Landshaft tekislash

Har bir maket dizaynerlari doimiy ravishda tarkibidagi bloklarni gorizontal yoki vertikal ravishda tekislash zarurati bilan duch keladi. Ushbu mavzu bo'yicha bir nechta yaxshi maqolalar mavjud, ammo ularning barchasi juda qiziqarli, ammo amaliy variantlarni taklif qiladi, shuning uchun siz asosiy narsani ta'kidlash uchun qo'shimcha vaqt sarflashingiz kerak. Ushbu ma'lumotni endi google-ga o'tkazmaslik uchun men uchun qulay bo'lgan shaklda topshirishga qaror qildim.

Bloklarni ma'lum o'lchamlarga moslashtirish

Eng oson cSS dan foydalanish balandligi (vertikal tekislash uchun) yoki kengligi (gorizontal tekislash uchun) ma'lum bo'lgan bloklarni tekislang.

To'ldirgich bilan tekislang

Ba'zan siz elementni markazlashtira olmaysiz, lekin unga "" bilan chegaralar qo'shasiz. to'ldirish".

Masalan, sizda 200x200px rasm bor va siz uni 240x300 blokda markazlashtirmoqchisiz, biz tashqi qutining balandligi va kengligini \u003d 200px qilib, yuqori va pastki qismiga 20px, chapga va o'ngga 50 ga qo'shishimiz mumkin.

.example-wrapper1 (fon: # 535E73; kengligi: 200px; balandligi: 200px; to'ldirish: 20px 50px;)

Mutlaqo joylashtirilgan qutilarni tekislash

Agar blok "ga o'rnatilgan bo'lsa pozitsiya: mutlaq", keyin u" position: nisbiy "bilan eng yaqin ota-onaga nisbatan joylashtirilishi mumkin. Buning uchun barcha xususiyatlar (" yuqori","to'g'ri","pastki","chap") ichki birlikka bir xil qiymatni belgilang, shuningdek" margin: auto ".

* Bir nuance bor: ichki blokning kengligi (balandligi) + chap (o'ng, pastki, yuqori) qiymat ota blok o'lchamidan oshmasligi kerak. Chap (o'ng, pastki, yuqori) xususiyatlarni 0 (nol) ga o'rnatish xavfsizroq.

.example-wrapper2 (pozitsiya: nisbiy; balandlik: 250px; fon: url (space.jpg);) .cat-king (kenglik: 200px; balandlik: 200px; pozitsiya: mutlaq; yuqori: 0; chap: 0; pastki: 0; o'ng: 0; margin: auto; fon: url (king.png);)

Landshaft tekislash

"Text-align: center" bilan tekislash

Blokda matnni tekislash uchun maxsus xususiyat mavjud " matn bilan tekislash". Qiymat o'rnatilganda" markaz"matnning har bir satri gorizontal ravishda tekislanadi. Ko'p satrli matn uchun ushbu echim juda kamdan-kam hollarda qo'llaniladi, ko'pincha bu parametr oraliqlarni, havolalarni yoki rasmlarni tekislash uchun topiladi.

Bir marta men matnni CSS bilan moslashtirish qanday ishlashini ko'rsatish uchun o'ylab topishim kerak edi, lekin xayolimga hech qanday qiziq narsa kelmadi. Avvaliga men bolalar bog'chasini biron bir joyga ko'chirishga qaror qildim, ammo bu maqolaning o'ziga xosligini buzishi mumkinligini va bizning aziz o'quvchilarimiz uni Google-da topa olmasligini esladim. Va keyin men ushbu xatboshini shu erda yozishga qaror qildim - axir gap u bilan emas, balki nuqta moslashtirishda.

.example-text (text-hizalanishi: center; padding: 10px; background: # FF90B8;)

Ta'kidlash joizki, ushbu xususiyat nafaqat matn uchun, balki har qanday matn uchun ham ishlaydi ichki elementlar ("displey: inline").

Ammo bu matn chap tomonga to'g'ri keladi, lekin u o'rashga nisbatan markazda hizalanadigan blokda joylashgan.

.example-wrapper3 (text-align: center; background: # FF90B8;) .inline-text (display: inline-block; width: 40%; padding: 10px; text-align: left; background: # FFE Zagruzka;)

Bloklarni chekkalarga tekislash

Kengligi ma'lum bo'lgan blok elementlari osongina gorizontal ravishda "margin-left: auto; margin-right: auto" ga o'rnatiladi. Odatda qisqartirilgan yozuv ishlatiladi: " margin: 0 avtomatik"(nol o'rniga har qanday qiymatdan foydalanish mumkin). Ammo bu usul vertikal tekislash uchun ishlamaydi.

.lama-o'rash (balandlik: 200px; fon: # F1BF88;) .lama1 (balandlik: 200px; kenglik: 200px; fon: url (lama.jpg); margin: 0 avtomatik;)

Mumkin bo'lgan joylarda barcha bloklarni birlashtirishga arziydi (bu erda qat'iy yoki mutlaq joylashishni talab qilinmaydi) - bu eng mantiqiy va etarli. Aniq ko'rinib tursa-da, ba'zida salbiy chegaralar bilan qo'rqinchli misollarni ko'rdim, shuning uchun aniqlik kiritishga qaror qildim.

Vertikal tekislash

Vertikal tekislash bilan juda ko'p ko'proq muammolar - aftidan, bu CSS-da ko'rsatilmagan. Istalgan natijaga erishishning bir necha yo'li mavjud, ammo ularning barchasi unchalik yoqimli emas.

Chiziq balandligi xususiyati bilan moslashtirish

Blokda bitta satr bo'lsa, uni vertikal tekislash uchun " chiziq balandligi"va uni kerakli balandlikka o'rnatish. Ishonchliligi uchun" balandlik "ni o'rnatishga arziydi, uning qiymati" satr balandligi "qiymatiga teng bo'ladi, chunki ikkinchisi hamma brauzerlarda qo'llab-quvvatlanmaydi.

.example-wrapper4 (satr balandligi: 100px; rang: # DC09C0; fon: # E5DAE1; balandlik: 100px; matn bilan tekislash: markaz;)

Bundan tashqari, bir nechta chiziqlar bilan bloklarni moslashtirishga erishish mumkin. Buning uchun siz qo'shimcha o'ram blokini ishlatishingiz va unga chiziq balandligini o'rnatishingiz kerak. Ichki blok ko'p qatorli bo'lishi mumkin, ammo "inline" talab qilinadi. Unga "vertikal-tekislash: o'rtani" qo'llash kerak.

.example-wrapper5 (satr balandligi: 160px; balandligi: 160px; shriftning kattaligi: 0; fon: # FF9B00;) .ambel-o'rash5 .text1 (displey: inline-block; shrift hajmi: 14px; chiziq balandligi: 1.5; vertikal-tekislash: o'rta; fon: # FFFAF2; rang: # FF9B00; matn bilan tekislash: markaz;)

Paket bloki "shrift hajmi: 0" o'rnatilgan bo'lishi kerak. Agar siz shrift hajmini nolga qo'ymagan bo'lsangiz, brauzer o'zidan bir nechta qo'shimcha piksel qo'shadi. Shuningdek, ichki blok uchun shrift o'lchamini va satr balandligini ko'rsatishingiz kerak bo'ladi, chunki bu xususiyatlar ota-onadan meros bo'lib o'tgan.

Jadvallarda vertikal tekislash

Mulk " vertikal tekislash"shuningdek jadval hujayralariga ta'sir qiladi." O'rta "qiymati o'rnatilganida, hujayra ichidagi tarkib markazlashtirilgan bo'ladi. Albatta, jadval tuzilishi bugungi kunda arxaik hisoblanadi, lekin alohida holatlarda siz uni belgilash orqali taqlid qilishingiz mumkin" displey: jadval katakchasi".

Odatda vertikal tekislash uchun ushbu parametrdan foydalanaman. Quyida tayyor loyihadan olingan maket namunasi keltirilgan. Shu tarzda vertikal ravishda markazlashtirilgan rasm qiziqish uyg'otadi.

.one_product .img_wrapper (displey: stol-katak; balandlik: 169px; vertikal-tekislash: o'rtada; to'lib toshgan: yashirin; fon: #fff; kenglik: 255px;) .one_product img (max-height: 169px; max-width: 100 %; min-width: 140px; display: block; margin: 0 auto;)

Shuni esda tutish kerakki, agar elementda "yo'q" dan tashqari "suzuvchi" bo'lsa, u holda u har qanday holda blok bo'ladi (displey: blok) - shunda siz qo'shimcha o'rash blokidan foydalanishingiz kerak bo'ladi.

Qo'shimcha qatorli element bilan tekislash

Inline elementlar uchun siz murojaat qilishingiz mumkin " vertikal-tekislash: o'rtada"Bunday holda," bilan barcha elementlar displey: inline"bitta chiziqda joylashganlar, umumiy markaz chizig'iga to'g'ri keladi.

Balandligi ota blokning balandligiga teng bo'lgan yordamchi blokni yaratishingiz kerak, keyin kerakli blok markazlashtiriladi. Buning uchun: oldin yoki: keyin soxta elementlardan foydalanish qulay.

.example-wrapper6 (balandligi: 300px; matn bilan tekislash: markaz; fon: # 70DAF1;) .pudge (displey: inline-block; vertikal-tekislash: o'rta; fon: url (pudge.png); fon rang: # fff; kengligi: 200px; balandligi: 200px;) .riki (displey: inline-block; balandligi: 100%; vertikal-tekislash: o'rtada;)

Displey: egiluvchan va tekislang

Agar siz haqiqatan ham Explorer 8 foydalanuvchilari haqida g'amxo'rlik qilmasangiz yoki ular uchun qo'shimcha javascript qo'shishga tayyor bo'lsangiz, unda "display: flex" dan foydalanishingiz mumkin. Flex qutilari tekislash muammolarini hal qilishda juda yaxshi ishlaydi va tarkibni markazga yo'naltirish uchun shunchaki "margin: auto" yozing.

Hozircha bu usul deyarli menga tushmagan, ammo buning uchun maxsus cheklovlar mavjud emas.

.example-wrapper7 (displey: flex; height: 300px; background: # AEB96A;) .example-wrapper7 img (margin: auto;)

Xo'sh, men faqat CSS-ni moslashtirish haqida yozmoqchi edim. Endi tarkibni markazlashtirishda muammo bo'lmaydi!

Ko'pincha matn terishda blokdagi matnni vertikal ravishda tekislash zarurati tug'iladi. Agar buni jadval yacheykasida bajarish kerak bo'lsa, u holda vertikal-align CSS xususiyatining qiymati o'rnatiladi.

Ammo oqilona savol tug'iladi, jadvalsiz, sahifa belgisini keraksiz teglar bilan ortiqcha yuklamasdan qilish mumkinmi? Javob "siz qila olasiz", ammo MSIE brauzerining CSS-ni yomon qo'llab-quvvatlaganligi sababli, bu muammoning echimi boshqa oddiy brauzerlarning echimidan farq qiladi.

Misol tariqasida quyidagi parchani ko'rib chiqing:

Bir nechta matn

va matnni qutining o'rtasiga va pastki qismiga vertikal ravishda tekislashga harakat qiling.

Muammoning echimi

"To'g'ri" brauzerlar (shu jumladan MSIE)

Ko'pgina zamonaviy brauzerlar CSS2.1-ni qo'llab-quvvatlaydi, ya'ni displey xususiyati uchun jadval-katak qiymati. Bu bizga matn bilan blokni jadval yacheykasi ko'rinishida qilish imkoniyatini beradi va bundan foydalanib, matnni vertikal tekislang:

div (
displey: jadval katakchasi;
vertikal-tekislash: o'rtada;
}

div (
displey: jadval katakchasi;
vertikal-tekislash: pastki;
}

Internet Explorer (7-versiyaga qadar)

Matnni MSIE-dagi blokning pastki chetiga moslashtirish muammosini hal qilish uchun siz mutlaq joylashishni aniqlashdan foydalanishingiz mumkin (bu erda blokda joylashgan ichki element kerak):

div (
pozitsiya: nisbiy;
}
div oralig'i (
displey: blok;
pozitsiya: mutlaq;
pastki: 0%;
chap: 0%;
kengligi: 100%;
}

Ushbu qoidalar to'plami "o'ng" brauzerlarda ham ishlaydi.

Xususiyatlarni ko'rsating

Div oralig'i (
displey: blok;
kengligi: 100%;
}

kerak emas, lekin ular sizga vertikal tekislashdan tashqari, gorizontal tekislashni ishlatishni rejalashtirsangiz, masalan, text-align: center ;.

Blok markazidagi matnni vertikal ravishda tekislash uchun asl nusxa hali ham murakkab bo'lishi kerak - biz yana bitta ichki elementni kiritamiz:

O'quv materiali:

CSS-da vertikal markazlashtirish (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
CSS yordamida vertikal markazlashtirish (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
Vertikal tekislash (www.cssplay.co.uk/ie/valign.html)
vertikal tekislash: o'rta (cssing.org.ua/2005/07/14/vertical-align-middle/)
CSS-da vertikal tekislashning yana bir usuli (cssing.org.ua/2007/04/26/another-css-valign-method)

CSS bilan vertikal ravishda elementlarni markazlashtirish ishlab chiquvchilar uchun qiyin vazifadir. Biroq, uni hal qilishning bir necha usullari mavjud, bu juda oddiy. Ushbu dars tarkibni vertikal markazlashtirishning 6 ta variantini taqdim etadi.

Boshlaymiz umumiy tavsif vazifalar.

Vertikal markazlashtirish muammosi

Gorizontal ravishda markazlashtirish juda oddiy va oson. Markazlashtirilgan element ichki qatorga qo'yilganda, parent-align xususiyatidan foydalaning. Element bloklarga asoslangan bo'lsa, biz uning kengligini va avtomatik o'rnatish chap va o'ng chekkalari.

Ko'p odamlar, text-align: property-dan foydalanishda, vertikal ravishda markazlashtirish uchun vertikal-align xususiyatiga murojaat qilishadi. Hammasi juda mantiqiy ko'rinadi. Agar siz jadval shablonlaridan foydalansangiz, ehtimol siz vertikal atributidan juda ko'p foydalangansiz, bu vertikal-tekislash to'g'ri yo'l ekanligiga ishonchni kuchaytiradi.

Ammo valign atributi faqat jadval katakchalarida ishlaydi. Va vertikal-tekislash xususiyati unga juda o'xshash. Bundan tashqari, bu jadval hujayralariga va ba'zi ichki elementlarga ta'sir qiladi.

Vertikal-align xususiyatining qiymati asosiy ichki elementga nisbatan ishlaydi.

Matn satrida hizalama satr balandligiga nisbatan.
Hizalama jadval yacheykasida maxsus algoritm bilan hisoblangan qiymatga nisbatan ishlatiladi (odatda qator balandligi olinadi).

Afsuski, vertikal-tekislash xususiyati blok darajasidagi elementlarga ta'sir qilmaydi (masalan, div elementidagi paragraflar kabi). Ushbu holat vertikal tekislash muammosining echimi yo'q degan fikrga olib kelishi mumkin.

Ammo blok elementlarini markazlashtirishning boshqa usullari mavjud, ularning tanlovi tashqi konteynerga nisbatan markazlashtirilgan narsaga bog'liq.

Chiziq balandligi usuli

Ushbu usul bitta satr matnini vertikal markazlashtirmoqchi bo'lganingizda ishlaydi. Siz qilishingiz kerak bo'lgan yagona narsa - chiziq balandligini shrift o'lchamidan kattaroq qilib belgilash.

Odatiy bo'lib, bo'sh joy matnning yuqori va pastki qismida teng ravishda taqsimlanadi. Va chiziq vertikal ravishda markazlashtiriladi. Ko'pincha chiziq balandligi element balandligiga tenglashtiriladi.

HTML:

Kerakli matn

CSS:

# bola (chiziq balandligi: 200px;)

Ushbu usul barcha brauzerlarda ishlaydi, garchi u faqat bitta satr uchun ishlatilishi mumkin. Misoldagi 200 px qiymati o'zboshimchalik bilan tanlangan. Matn shrift hajmidan kattaroq har qanday qiymatdan foydalanish mumkin.

Tasvirni chiziq balandligi bilan markazlashtirish

Agar tarkib rasm bo'lsa? Yuqoridagi usul ish beradimi? Javob CSS-ning yana bir qatorida.

HTML:

CSS:

#parent (satr balandligi: 200px;) #parent img (vertikal-align: middle;)

Line-height xususiyat qiymati tasvir balandligidan katta bo'lishi kerak.

CSS jadvallari usuli

Vertikal-tekislash xususiyati u juda yaxshi ishlaydigan jadval katakchalariga taalluqli ekanligi yuqorida aytib o'tilgan edi. Biz elementimizni jadval yacheykasi sifatida ko'rsatishimiz va tarkibni vertikal markazlashtirish uchun vertikal-align xususiyatidan foydalanishimiz mumkin.

Eslatma: CSS jadvali HTML jadvali bilan bir xil emas.

HTML:

Tarkib

CSS:

#parent (display: table;) # child (display: table-cell; vertical-align: middle;)

Biz ota-div uchun jadval natijasini o'rnatdik va ichki div jadval jadvallari sifatida chiqadi. Endi ichki idishda vertikal-tekislash xususiyatidan foydalanishingiz mumkin. Undagi hamma narsa vertikal ravishda markazlashtiriladi.

Yuqoridagi usuldan farqli o'laroq, bu holda tarkib dinamik bo'lishi mumkin, chunki div elementi tarkibiga mos ravishda o'lchamini o'zgartiradi.

Ushbu usulning kamchiligi shundaki, u IE ning eski versiyalarida ishlamaydi. Ichki konteyner uchun displey: inline-block xususiyatidan foydalanishimiz kerak.

Mutlaq joylashish va salbiy chegaralar

Ushbu usul barcha brauzerlarda ham ishlaydi. Ammo bu markazlashtirilgan elementga balandlik berilishini talab qiladi.

Misol kodi bir xil gorizontal va vertikal markazlashtirishni amalga oshiradi:

HTML:

Tarkib

CSS:

#parent (pozitsiya: nisbiy;) # bola (pozitsiya: mutlaq; tepa: 50%; chap: 50%; balandlik: 30%; kenglik: 50%; margin: -15% 0 0 -25%;)

Birinchidan, biz elementlarning joylashishini aniqlash turini o'rnatdik. Keyin ichki div uchun yuqori va chap xususiyatlarni ota-onaning markazi bo'lgan 50% ga qo'ying. Ammo ichki elementning yuqori chap burchagi markazlashtirilgan. Shuning uchun, siz uni ko'tarishingiz kerak (balandlikning yarmi) va chapga (kenglikning yarmi) harakatlantiring, shunda markaz asosiy elementning markaziga to'g'ri keladi. Shunday qilib, elementning balandligini bilish bu holda zarurdir. Keyin elementni mos ravishda balandlik va kenglikning yarmiga teng bo'lgan yuqori yuqori va chap chekkalarga o'rnatdik.

Ushbu usul barcha brauzerlarda ishlamaydi.

Mutlaq joylashish va cho'zish

Misol kodi vertikal va gorizontal markazlashtiriladi.

HTML:

Tarkib

CSS:

#parent (pozitsiya: nisbiy;) # bola (pozitsiya: mutlaq; tepa: 0; pastki: 0; chap: 0; o'ng: 0; kenglik: 50%; balandlik: 30%; margin: avtomatik;)

Ushbu usulning asosiy maqsadi ichki, yuqori, pastki, o'ng va chap xususiyatlarini 0 ga o'rnatish orqali ichki elementning barcha 4 chegaralariga cho'zishdir.

Uni har tomondan avtomatik shakllanish chegaralariga o'rnatish barcha to'rt tomonga teng qiymatlarni o'rnatadi va ichki elementni markaz elementiga joylashtiradi.

Afsuski, bu usul IE7 va undan pastda ishlamaydi.

Tepa va pastki chekkalari teng

Ushbu usul asosiy elementning yuqorisida va pastida teng chegaralarni aniq belgilaydi.

HTML:

Tarkib

CSS:

#parent (to'ldirish: 5% 0;) # bola (to'ldirish: 10% 0;)

Masalan, CSS kodi ikkala element uchun yuqori va pastki chekkalarni o'rnatadi. Ichki element uchun plomba o'rnatilishi vertikal markazlashtirish uchun xizmat qiladi. Va asosiy elementning to'ldirilishi undagi ichki elementning markazini tashkil qiladi.

Uchun dinamik o'zgarish ishlatilgan element o'lchamlari nisbiy birliklar o'lchovlar. Va mutlaq birliklar uchun hisob-kitoblarni bajarish kerak bo'ladi.

Masalan, agar asosiy element 400px balandlikda va ichki element 100px bo'lsa, unda 150px yuqori va pastki chegaralar talab qilinadi.

150 + 150 + 100 = 400

% Dan foydalanish hisob-kitoblarni brauzerda qoldirishga imkon beradi.

Ushbu usul hamma joyda ishlaydi. Orqa tomon hisob-kitoblarga bo'lgan ehtiyoj.

Eslatma: Ushbu usul elementning to'ldirilishini o'rnatish orqali ishlaydi. Element ichidagi chekkalarni ham ishlatishingiz mumkin. Chegaralarni yoki to'ldirishni ishlatish to'g'risida qaror loyihaning o'ziga xos xususiyatlariga qarab qabul qilinishi kerak.

Suzuvchi div

Ushbu usul suzuvchi bo'sh div elementidan foydalanadi va ichki elementimizning hujjatdagi o'rnini boshqarishga yordam beradi. Suzuvchi div HTML kodidagi ichki elementimiz oldida joylashganligiga e'tibor bering.

HTML:

Tarkib

CSS:

#parent (balandlik: 250px;) #floater (suzuvchi: chap; balandlik: 50%; kenglik: 100%; chekka-pastki: -50px;) # bola (aniq: ikkalasi; balandlik: 100px;)

Biz bo'sh divni chapga yoki o'ngga siljitamiz va uning balandligini asosiy elementning 50% gacha o'rnatamiz. Shu tarzda u ota-onaning yuqori qismini to'ldiradi.

Ushbu div suzib yurganligi sababli, u hujjatning normal oqimidan o'chiriladi va biz ichki element uchun matnni o'rashni bekor qilishimiz kerak. Misol aniq: ikkalasini ham ishlatadi, lekin suzuvchi bo'sh div ning ofsetiga bir xil yo'nalishni ishlatish kifoya.

Ichki divning yuqori chegarasi to'g'ridan-to'g'ri bo'sh divning pastki chegarasi ostidadir. Ichki elementni suzuvchi bo'sh elementning balandligi yarmiga ko'tarishimiz kerak. Muammoni hal qilish uchun suzuvchi bo'sh div uchun margin-bottom xususiyati uchun salbiy qiymatdan foydalaning.

Ushbu usul barcha brauzerlarda ham ishlaydi. Biroq, uni ishlatish uchun qo'shimcha bo'sh div elementi va ichki elementning balandligi haqida ma'lumot kerak.

Xulosa

Ta'riflangan barcha usullardan foydalanish oson. Qiyinchilik shundaki, ularning hech biri barcha holatlarga mos kelmaydi. Siz loyihani tahlil qilishingiz va talablarga eng mos keladiganini tanlashingiz kerak.

Layout bilan shug'ullanadigan har bir kishi ertami-kechmi elementlarni vertikal ravishda tekislash zarurligiga duch keladi ... va elementni markazga tekislashda qanday qiyinchiliklar paydo bo'lishi mumkinligini biladi. CSS bir nechta qiymatga ega bo'lgan "vertikal-align" xususiyatiga ega, bu mantiqan vertikal tekislashni amalga oshirishi kerak. Amalda esa u kutilganidek umuman ishlamaydi.

Ushbu muammoni hal qilishning bir necha texnik usullari mavjud. Quyida ularning har birini batafsil ko'rib chiqamiz.

1. Jadval yordamida tekislash

Bunday holda, biz tashqi blokni bitta hujayra jadvali bilan almashtiramiz. Hizalama katak tarkibiga, ya'ni ichki blokga qo'llaniladi.

HTML

CSS

Tashqi (kenglik: 200px; balandlik: 200px; matn bilan tekislash: markaz; vertikal-tekislash: o'rtada; fon rangida: #ffc;)

Asosiy kamchilik ushbu qaror, semantik nuqtai nazardan - jadvaldan maqsadga muvofiq foydalanmaslik. Ikkinchi nuqson shundaki, jadvalni yaratish tashqi blok atrofida yana bitta element qo'shishni talab qiladi.

Birinchi minus jadval teglarini div bilan almashtirish va CSS-da jadvalni ko'rsatish rejimini o'rnatish orqali qisman zo'ravonliksiz bo'lishi mumkin.

HTML

CSS

Tashqi o'rash (displey: jadval;) .outer (displey: jadval-katak;)

2. Chiziqlar bilan tekislash

Ichki va tashqi qutilarning balandliklarini bilamiz deb taxmin qilsak, hizalamayı quyidagi formuladan foydalanib, ichki qutining vertikal plomba yordamida o'rnatilishi mumkin: (H tashqi - H ichki) / 2.

CSS

Tashqi (balandlik: 200 piksel;). Ichki (balandlik: 100 piksel; chekka: 50 piksel 0;)

Yechimning salbiy tomoni - bu ikkala blokning balandligi haqida majburiy bilim.

3. Chiziq balandligi bilan tekislash

Agar ichki blok bitta satrdan ko'p bo'lmagan matnni egallasa, u holda siz satr balandligi xususiyatidan foydalanib, uni tashqi blok balandligiga tenglashtirasiz. Ichki blokning tarkibi ikkinchi qatorga o'tmasligi kerakligi sababli, bo'sh joy: nowrap va overflow: yashirin qoidalarni ham qo'shish tavsiya etiladi.

CSS

Tashqi (balandlik: 200 piksel; chiziq balandligi: 200 piksel;). Ichki (bo'sh joy: nowrap; to'lib toshgan: yashirin;)

Ushbu usul ko'p satrli matnni tekislash uchun ham ishlatilishi mumkin. Buning uchun ichki blok satr balandligi qiymatini bekor qilishi va displeyni qo'shishi kerak: inline-block va vertikal-align: o'rta qoidalar.

CSS

Tashqi (balandlik: 200 piksel; chiziq balandligi: 200 piksel;). Ichki (chiziq balandligi: normal; displey: chiziqli blok; vertikal-tekislash: o'rta;)

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

4. "Stretch" yordamida tekislash

Ushbu usul ichki birlikning balandligi bizga ma'lum bo'lganida ishlatilishi mumkin, ammo tashqi ko'rinishi ma'lum emas.

Ushbu usulni qo'llash uchun biz quyidagilarga muhtojmiz:

Tashqi blokni nisbiy joylashish holatiga o'rnating: nisbiy, ichki tomonga esa mutlaq holat: mutlaq;
Ichki blokga bir nechta qoidalarni yuqori: 0 va pastki: 0 qo'shing, buning natijasida u tashqi blokning butun balandligiga cho'ziladi;
Ichki blokning vertikal to'ldirilishini avtomatik ravishda o'rnating.

CSS

Tashqi (pozitsiya: nisbiy;). Ichki (balandlik: 100px; pozitsiya: mutlaq; tepa: 0; pastki: 0; margin: auto 0;)

5. Salbiy margin-top bilan tekislash

Oldingisiga o'xshash tarzda, bu usul tashqi blokning balandligi noma'lum bo'lganida, lekin ichki balandligi ma'lum bo'lganda qo'llaniladi.

Tashqi blokni nisbiy joylashishini, ichki qismini esa mutlaq o'rnatishingiz kerak. Keyin ichki blokni tashqi blok tepalikning yarmi balandligi bilan pastga siljiting: 50% va o'z balandligi marj-tepasining yarmiga ko'taring: -H _ichki / 2 .

CSS

Tashqi (pozitsiya: nisbiy;). Ichki (balandlik: 100px; holat: mutlaq; yuqori: 50%; margin-top: -50px;)

Minus bu usul - ichki blokning balandligi ma'lum bo'lishi kerak.

6. Transformatsiyaga moslashtirish

Usul ichki blokning balandligi noma'lum bo'lganda qo'llanilishi mumkin. Ichki blokni tashqi blok tepalikning yarmi balandligi bo'yicha pastga siljitish kerak: 50%, so'ngra konvertatsiya xususiyatidan foydalaning va translateY (-50%) funktsiyasi yordamida uni orqaga qaytaring.

CSS

Tashqi (pozitsiya: nisbiy;). Ichki (pozitsiya: mutlaq; yuqori: 50%; konvertatsiya: translateY (-50%);)

7. Psevdoelement bilan tekislash

Bu eng ko'p universal usul, ikkala blokning balandligi noma'lum bo'lganda ham foydalanish mumkin.

Usulning mohiyati tashqi blok ichiga 100% balandlikdagi inline-blokni qo'shish va uni vertikal tekislash uchun o'rnatishdir. Shunday qilib, qo'shilgan blokning balandligi tashqi blokning balandligiga teng bo'ladi. Ichki blok vertikal ravishda qo'shilgan va shuning uchun tashqi blok bilan tekislanadi.

Semantikani buzmaslik uchun oldin yoki undan keyin psevdoelementlardan foydalangan holda ichki blokni qo'shish maqsadga muvofiqdir.

CSS

Tashqi: oldin (displey: inline-blok; balandlik: 100%; vertikal-tekislash: o'rta; tarkib: "";). Ichki (displey: inline-blok; vertikal-align: o'rta;)

Ushbu usulning nochorligi shundaki, ichki blokni mutlaq joylashishi bilan qabul qilish mumkin emas.

8. Flexbox bilan tekislang

Vertikal tekislashning eng zamonaviy usuli Flexible Box Layout (yoki qisqartirilgan) yordamida amalga oshiriladi Flexbox). Bu sizga elementlarning sahifadagi joylashishini moslashuvchan ravishda boshqarish, ularni deyarli hamma joyda joylashtirish imkonini beradi. Flexbox uchun markazni tekislash juda oddiy vazifadir.

CSS-da oddiy ko'rinadigan ba'zi narsalarni bajarish oson emas. Ushbu narsalardan biri hizalama, ya'ni. bir elementni boshqasiga nisbatan ma'lum bir tarzda joylashtirish kerak bo'lganda.

Ushbu maqola gorizontal va / yoki vertikal ravishda markazlashtiruvchi elementlarning ishini soddalashtirishga yordam beradigan ba'zi tayyor echimlarni taqdim etadi.

Eslatma: har bir echim ostida, ko'rsatilgan CSS kodi ishlaydigan versiyalar ko'rsatiladigan brauzerlar ro'yxati mavjud.

CSS - Blokni tekislash markazi

1. Bir blokni boshqasining o'rtasiga tekislang. Bunday holda, birinchi va ikkinchi bloklar dinamik o'lchamlarga ega.

...

Ota-ona (pozitsiya: nisbiy;). Bola (pozitsiya: mutlaq; chapda: 50%; yuqori: 50%; -webkit-transform: tarjima (-50%, -50%); -moz-transform: tarjima (-50%) -Ms-transform: translate (-50%, -50%); -o-transform: translate (-50%, -50%); konvertatsiya qilish: translate (-50%, -50%) ;)

Chrome 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Bir blokni boshqasining o'rtasiga tekislang. Bunday holda, ikkinchi blok belgilangan o'lchamlarga ega.

Ota-ona (pozitsiya: nisbiy;). Bola (pozitsiya: mutlaq; chapda: 50%; tepada: 50%; / * 2 blok kengligi va balandligi * / kengligi: 500px; balandligi: 250px; / * qiymatlar uning o'lchamiga qarab belgilanadi * / / * margin-left \u003d - width / 2 * / margin-left: -250px; / * margin-top \u003d - height / 2 * / margin-top: -125px;)