, suzuvchi.
Xususiyat sintaksisi:
suzuvchi: chap | o'ng | yo'q | meros,
Qaerda:

• chap - elementni ekranning chap tomoniga tekislaydi. Qolgan elementlarning atrofida oqim o'ng tomonda sodir bo'ladi;
• o'ng - o'ngga tekislash, boshqa elementlar atrofida oqim - chapga;
• yo'q - o'rashga yo'l qo'yilmaydi;
• meros - ota-ona elementi qiymatini meros qilib olish.

Ushbu xususiyat yordamida divlarni joylashtirishning engil namunasini ko'rib chiqamiz:

Endi sahifaning o'rtasiga uchinchi divni joylashtirish uchun xuddi shu xususiyatdan foydalanishga harakat qilaylik. Ammo afsuski, float-ning markaz qiymati yo'q. Va o'ngga yoki chapga tekislash qiymatiga yangi blokni tayinlaganingizda, u belgilangan yo'nalishda siljiydi. Shuning uchun, faqat uchta blokni chapga qo'yib qo'yish kerak:

Ammo bu ham eng yaxshi variant emas. Oyna kichraytirganda, barcha qatlamlar vertikal ravishda bir qatorga joylashtiriladi va kattalashtirilganda ular oynaning chap chetiga yopishadi. Shuning uchun biz divni markazlashtirish uchun yaxshiroq usulga muhtojmiz.

Qatlamlarni markazlashtirish

Keyingi misolda biz qolgan elementlarni joylashtirish uchun konteyner qatlamidan foydalanamiz. Bu oyna o'lchamini o'zgartirganda bloklarning bir-biriga nisbatan siljishi muammosini hal qiladi. Konteynerni o'rtada markazlashtirish yuqori chekka va chekka tomonlar uchun margin xususiyatlarini nolga o'rnatish orqali amalga oshiriladi (margin: 0 auto):

Xuddi shu misol divni gorizontal ravishda qanday qilib markazlashtira olishingizni ko'rsatadi. Agar yuqoridagi kodni biroz tahrir qilsangiz, bloklarning vertikal tekislanishiga erishishingiz mumkin. Buning uchun faqat konteyner qatlamining uzunligini o'zgartirish kerak (uni kamaytiring). Ya'ni, CSS-ni tahrir qilgandan so'ng, sinf quyidagicha ko'rinishi kerak:

O'zgarishdan so'ng, barcha bloklar o'rtada bir qatorga qat'iy ravishda to'g'ri keladi. Va ularning pozitsiyasi brauzer oynasining har qanday o'lchamida o'zgarmaydi. Div-ning vertikal markazlashtirilishi quyidagicha:

Quyidagi misolda biz konteyner ichidagi qatlamlarni markazlashtirish uchun bir qator yangi CSS xususiyatlaridan foydalandik:

Biz foydalangan CSS xususiyatlari va ularning qiymatlari haqida qisqacha tavsif ushbu misol div ichidagi divni markazlashtirish uchun:

• displey: inline-blok - Blok elementini chiziqqa tekislaydi va uning boshqa elementga o'ralganligini ta'minlaydi.
• vertikal-tekislash: o'rta - elementni o'rtada ota-onaga nisbatan tekislaydi;
• margin-left - marginni chapga o'rnatadi.

Qatlamdan qanday qilib havola qilish mumkin

Qanday g'alati tuyulsa ham, bu mumkin. Ba'zan menyularning har xil turlarini qo'yishda havola sifatida div blok kerak bo'lishi mumkin. Keling, bog'lanish qatlamini amalga oshirishning amaliy namunasini ko'rib chiqaylik:

Ushbu misolda chiziqli displey: blok yordamida biz havolani blok elementi qiymatiga o'rnatdik. Va div blokining butun balandligini havola qilish uchun balandlikni o'rnating: 100%.

Blok elementlarini yashirish va ko'rsatish

Bloklash elementlari interfeysning funksionalligini kengaytirish uchun eskirgan jadval tartibiga qaraganda ko'proq imkoniyatlarni taqdim etadi. Ko'pincha veb-sayt dizayni noyob va taniqli bo'lishi mumkin. Ammo bunday eksklyuziv uchun siz bo'sh joy etishmasligi bilan to'lashingiz kerak.

Ayniqsa, bu tashvish uy sahifasi, eng yuqori bo'lgan reklama joylashtirish narxi. Shu sababli, boshqa reklama bannerini qaerga "itarish" kerakligi haqida muammo bor. Div-ni sahifaning o'rtasiga tekislash etarli emas!

Keyinchalik oqilona echim - ba'zi bloklarni yashirin qilishdir. Bunday dasturning oddiy namunasi:

Ob'ektlarni vertikal ravishda markazlashtirish cSS dan foydalanish ishlab chiquvchilar uchun qiyinchilik tug'diradigan muammo. 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 o'rnatilganida, 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 jadvalli shablonlardan foydalangan bo'lsangiz, ehtimol siz vertikal atributdan 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 balandligi bilan bog'liq holda amalga oshiriladi.
• Hizalama jadval yacheykasida maxsus algoritm bilan hisoblangan qiymatga nisbatan ishlatiladi (odatda qator balandligi olinadi).

Afsuski, vertikal-tekislash xususiyati blok elementlarida ishlamaydi (masalan, div element ichidagi paragraflar). 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:

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 yana bir CSS qatorida.

HTML:

CSS:

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

Line-height xususiyat qiymati tasvir balandligidan kattaroq 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:

CSS:

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

Biz ota-div uchun jadvalli displeyni o'rnatamiz va ichki div jadval katakchasi sifatida ko'rsatiladi. 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:

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 balandligi haqida ma'lumot 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:

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 markazning markaziga joylashtiradi.

Afsuski, ushbu usul IE7 va undan pastda ishlamaydi.

Tepa va pastki chekkalari teng

Ushbu usul ota-ona elementi ustida va pastda teng chegaralarni aniq belgilaydi.

HTML:

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 o'lchov birliklari uchun siz hisob-kitoblarni bajarishingiz kerak.

Masalan, agar asosiy element 400px balandlikda va ichki element 100px bo'lsa, u holda 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 tashqi to'ldirilishini o'rnatish orqali ishlaydi. Bundan tashqari, element ichidagi chekkalarni 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 joylashtirilganligiga e'tibor bering.

HTML:

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.

O'ylaymanki, maketni tuzgan ko'pchiligingiz elementlarni vertikal ravishda tekislash kerakligi va elementni markazga tekislashda qanday qiyinchiliklar paydo bo'lishini bilishingiz kerak.

Ha, vertikal tekislash uchun CSS bir nechta qiymatga ega bo'lgan vertikal-align maxsus xususiyatga ega. Amalda esa u kutilganidek umuman ishlamaydi. Keling, buni tushunishga harakat qilaylik.

Keling, quyidagi yondashuvlarni taqqoslaylik. Hizalamak:

• jadvallar,
• girintilar,
• chiziq balandligi,
• cho'zish,
• salbiy marja,
• o'zgartirish,
• psevdoelement,
• flexbox.

Misol tariqasida quyidagi misolni ko'rib chiqing.

Ikkita div mavjud, biri ikkinchisida joylashgan. Keling, ularga mos keladigan sinflarni beramiz - tashqi va ichki.

Qiyinchilik ichki elementni tashqi element markaziga tekislashdir.

Boshlash uchun tashqi va ichki blok o'lchamlari holatini ko'rib chiqing ma'lum... Ichki elementga displey: inline-blok, matnni tekislang: markazga va vertikal-tekislang: o'rtadan tashqi tomonga.

Hizalama faqat inline yoki inline-block displey rejimiga ega bo'lgan elementlarga nisbatan qo'llanilishini unutmang.

Chegaralarini ko'rish uchun bloklarning o'lchamlari va fon ranglarini bering.

Tashqi (kenglik: 200px; balandlik: 200px; matn bilan tekislash: markaz; vertikal-tekislash: o'rtada; fon rang: #ffc;). Ichki (displey: inline-blok; kenglik: 100px; balandlik: 100px; fon rang : #fcc;)
Uslublarni qo'llaganimizdan so'ng, ichki blok vertikal emas, balki gorizontal ravishda tekislanganligini ko'ramiz:
http://jsfiddle.net/c1bgfffq/

Nima uchun bunday bo'ldi? Gap shundaki, vertikal-tekislash xususiyati hizalanishga ta'sir qiladi uning o'zi emas, balki uning mazmuni (jadval hujayralariga qo'llanilgandan tashqari). Shuning uchun, ushbu xususiyatni tashqi elementga qo'llash hech narsa qilmadi. Bundan tashqari, ushbu xususiyatni ichki elementga qo'llash ham hech narsa qilmaydi, chunki inline-bloklar qo'shni bloklarga nisbatan vertikal ravishda hizalanadi va bizning holatimizda bitta inline blok mavjud.

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

Jadval bilan tekislang

Aqlga keladigan birinchi echim bu tashqi blokni bitta hujayrali stol bilan almashtirishdir. Bunday holda, hizalama katak tarkibiga, ya'ni ichki blokga nisbatan qo'llaniladi.

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

Aniq kamchilik ushbu qaror - semantik nuqtai nazardan, jadvallarni tekislash uchun ishlatish noto'g'ri. Ikkinchi nuqson shundaki, jadvalni yaratish tashqi blok atrofida yana bitta element qo'shishni talab qiladi.

Jadval va td teglarini div bilan almashtirish va CSS-da jadvalni ko'rsatish rejimini o'rnatish orqali birinchi minusni qisman olib tashlash mumkin.

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

Chiziqlar bilan tekislang

Agar ichki va tashqi qutilarning balandliklari ma'lum bo'lsa, u holda hizalamayı quyidagi formuladan foydalanib, ichki qutining vertikal plomba yordamida o'rnatilishi mumkin: (H tashqi - H ichki) / 2.

Tashqi (balandlik: 200 piksel;). Ichki (balandlik: 100 piksel; chekka: 50 piksel 0;)
http://jsfiddle.net/c1bgfffq/6/

Yechimning nochorligi shundaki, u faqat unda qo'llaniladi cheklangan raqam ikkala blokning balandligi ma'lum bo'lgan holatlar.

Chiziq balandligi bilan tekislash

Agar siz ichki blok bir nechta matn satrini egallashi kerakligini bilsangiz, u holda satr balandligi xususiyatidan foydalanib, uni tashqi blok balandligiga tenglashtirasiz. Ichki blokning tarkibi ikkinchi qatorga o'ralmasligi kerakligi sababli, bo'sh joy: nowrap va overflow: yashirin qoidalarni qo'shish tavsiya etiladi.

Tashqi (balandlik: 200px; chiziq balandligi: 200px;). Ichki (bo'sh joy: nowrap; to'lib toshgan: yashirin;)
http://jsfiddle.net/c1bgfffq/12/

Shuningdek ushbu texnika ko'p satrli matnni ichki blok uchun satr balandligi qiymatini bekor qilish va displey: inline-block va vertikal-align: o'rta qoidalarni qo'shish orqali tekislash uchun ham foydalanish mumkin.

Tashqi (balandlik: 200 piksel; chiziq balandligi: 200 piksel;). Ichki (chiziq balandligi: normal; displey: chiziqli blok; vertikal-tekislash: o'rta;)
http://jsfiddle.net/c1bgfffq/15/

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

Stretch hizalaması

Ushbu usul tashqi blokning balandligi noma'lum bo'lganida, lekin ichki birlikning balandligi ma'lum bo'lganda ishlatilishi mumkin.

Buning uchun sizga kerak:

1. tashqi blokni nisbiy joylashishini, ichki qismini esa mutlaq;
2. ichki blokga yuqoridan: 0 va pastdan: 0 qoidalarini qo'shing, buning natijasida u tashqi blokning butun balandligiga cho'ziladi;
3. ichki blokning vertikal to'ldirilishi uchun avtomatik ravishda o'rnatiladi.

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

Ushbu texnikaning mohiyati shundaki, cho'zilgan va mutlaqo joylashtirilgan quti uchun balandlikni belgilash brauzerni avtomatik ravishda o'rnatilganda vertikal chekkalarni teng nisbatda hisoblashga majbur qiladi.

Salbiy margin-top bilan tekislash

Ushbu usul keng tanilgan va juda tez-tez ishlatib kelinmoqda. Oldingisi singari, tashqi blokning balandligi noma'lum bo'lganida, lekin ichki blokning balandligi ma'lum bo'lganda qo'llaniladi.

Tashqi blokni nisbiy joylashishini, ichki qismini esa mutlaq holatini o'rnatishingiz kerak. Keyin ichki qutini tashqi quti balandligining yarmi bo'ylab siljitish kerak: 50% va o'z balandligi chegarasining yarmiga ko'taring: -H ichki / 2.

Tashqi (pozitsiya: nisbiy;). Ichki (balandlik: 100px; holat: mutlaq; yuqori: 50%; margin-top: -50px;)
http://jsfiddle.net/c1bgfffq/13/

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

Transformatsiyaga moslashtirish

Ushbu usul avvalgisiga o'xshaydi, lekin uni ichki birlik balandligi noma'lum bo'lgan hollarda qo'llash mumkin. Bunday holda, salbiy piksel to'ldirish o'rniga, siz transformatsiya xususiyatidan foydalanishingiz va translateY funktsiyasi va -50% qiymati yordamida ichki blokni yuqoriga ko'tarishingiz mumkin.

Tashqi (pozitsiya: nisbiy;). Ichki (pozitsiya: mutlaq; yuqori: 50%; konvertatsiya: translateY (-50%);)
http://jsfiddle.net/c1bgfffq/9/

Nima uchun oldingi yo'l foiz qiymatini belgilashning iloji yo'q edi? Margin xususiyatining foiz qiymatlari asosiy elementga nisbatan hisoblanganligi sababli, 50% qiymat tashqi qutining balandligining yarmiga teng bo'ladi va biz ichki qutini o'z balandligining yarmiga ko'tarishimiz kerak edi. Transformatsiya xususiyati bunga to'g'ri keladi.

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

Flexbox bilan tekislang

Vertikal tekislashning eng zamonaviy usuli bu Flexible Box Layout (ommabop Flexbox nomi bilan mashhur) dan foydalanishdir. Ushbu modul sahifadagi elementlarning joylashishini moslashuvchan ravishda boshqarish, ularni deyarli hamma joyda joylashtirishga imkon beradi. Flexbox uchun markazni tekislash juda oddiy vazifadir.

Tashqi quti displeyga o'rnatilishi kerak: egiluvchan, ichki quti esa margin: auto ga o'rnatilishi kerak. Va bu hammasi! Go'zal, shunday emasmi?

Tashqi (displey: egiluvchanlik; kenglik: 200px; balandlik: 200px;). Ichki (kenglik: 100px; margin: avtomatik;)
http://jsfiddle.net/c1bgfffq/14/

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

Qaysi yo'lni tanlash kerak?

Muammoning bayonotidan kelib chiqish kerak:

• Matnni vertikal tekislash uchun vertikal plomba yoki satr balandligi xususiyatidan foydalanish yaxshiroqdir.
• Balandligi ma'lum bo'lgan mutlaqo joylashtirilgan elementlar uchun (ikonkalar kabi), salbiy margin-top xususiyati juda mos keladi.
• Keyinchalik murakkab holatlar uchun blok balandligi noma'lum bo'lsa, siz yolg'on element yoki transform xususiyatidan foydalanishingiz kerak.
• Xo'sh, agar siz IE brauzerining eski versiyalarini qo'llab-quvvatlashga hojat yo'qligi uchun omadingiz bo'lsa, unda Flexbox-dan foydalanish yaxshiroqdir.

Teglar: Teglar qo'shish

Elementlarni gorizontal va vertikal tekislash amalga oshirilishi mumkin turli xil yo'llar... Usulni tanlash element turiga (blok yoki inline), joylashish turiga, o'lchamiga va boshqalarga bog'liq.

1. Blok / sahifaning markaziga gorizontal tekislash

1.1. Agar blok kengligi bo'lsa:

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

Agar siz tekislashingiz kerak bo'lsa chiziq elementi shu tarzda, u displeyni o'rnatishi kerak: blok;

1.2. Agar blok boshqa blokda joylashgan bo'lsa va u uchun kenglik o'rnatilmagan / o'rnatilmagan bo'lsa:

.wrapper (matn bilan tekislang: markaz;)

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

.wrapper (holat: nisbiy; / * ota-boks uchun nisbiy joylashishni belgilab qo'ying, shunda keyinchalik quti uning ichida mutlaqo joylashishi mumkin * /) .box (kengligi: 400px; holati: mutloq; chap: 50%; margin-left: -200px; / * blokni chap tomonga uning kengligining yarmiga teng masofaga siljiting * /)

1.4. Agar bloklar uchun kenglik belgilanmagan bo'lsa, siz ota-o'rash blokidan foydalanib markazlashtira olasiz:

.wrapper (text-align: center; / * blok tarkibini markazga joylashtirish * /) .box (displey: inline-block; / * bloklarni gorizontal tartibda tartiblash * / margin-right: -0.25em; / * o'ngni olib tashlash bloklar orasidagi bo'shliq * /)

2. Vertikal tekislash

2.1. Agar matn bitta satrdan iborat bo'lsa, masalan, tugmalar va menyu elementlari uchun:

.tugma (balandlik: 50px; chiziq balandligi: 50px;)

2.2. Blokni ota-ona bloki ichida vertikal ravishda tekislash uchun:

.wrapper (pozitsiya: nisbiy;) .box (balandlik: 100px; holat: mutlaq; yuqori: 50%; margin: -50px 0 0 0;)

2.3. Jadval turi bo'yicha vertikal tekislash:

.wrapper (displey: stol; kenglik: 100%;) .box (displey: stol-katak; balandlik: 100px; matn bilan tekislash: markaz; vertikal-tekislash: o'rtada;)

2.4. Agar blok kengligi va balandligiga ega bo'lsa va uni asosiy blokda markazlashtirish kerak bo'lsa:

.wrapper (pozitsiya: nisbiy;) .box (balandlik: 100px; kenglik: 100px; pozitsiya: mutlaq; tepa: 0; o'ng: 0; pastki: 0; chap: 0; margin: avtomatik; toshib ketish: avtomatik; / * ga tarkib sudralmadi * /)

2.5. CSS3 formatidan foydalangan holda sahifa / blokning markazida mutlaq joylashish:

agar element o'lchovli bo'lsa

div (kengligi: 300px; / * blokning kengligini o'rnatish * / balandligi: 100px; / * blokning balandligini o'rnatish * / aylantirish: tarjima qilish (-50%, -50%); pozitsiya: mutlaq; yuqori: 50%; chapda: 50% ;)

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

h1 (margin: 0; transform: translate (-50%, -50%); pozitsiya: mutlaq; top: 50%; chap: 50%;)

Xayrli kun, ushbu nashrning obunachilari va o'quvchilari. Bugun men tafsilotlarga o'tmoqchiman va CSS-dagi matnni qanday qilib markazlashtirishni aytmoqchiman. Oldingi ba'zi maqolalarda men bilvosita tegib ketganman ushbu mavzu, shuning uchun siz ushbu sohada ma'lum ma'lumotlarga egasiz.

Biroq, ushbu lavozimda men sizga moslashtirishning barcha mumkin bo'lgan usullari haqida aytib beraman, shuningdek paragraflarda qanday qilib indentatsiya qilish va qizil chiziqlarni chizish kerakligini tushuntirib beraman. Shunday qilib, materialni o'rganishni boshlaymiz!

HTML va uning mohiyati va tekislang

Ushbu usul deyarli hech qachon qo'llanilmaydi, chunki u kaskadli uslublar varag'i vositalari bilan almashtirilgan. Bunday yorliq borligini bilish, ammo sizga zarar qilmaydi.

Validatsiyaga kelsak (ushbu atama "" maqolasida batafsil tavsiflangan), u holda html spetsifikatsiyasining o'zi foydalanishni bekor qiladi < markaz\u003e, chunki amal qilish uchun o'tish davridan foydalanish kerak DOCTYPE\u003e.

Ushbu turdagi taqiqlangan narsalarni o'tkazib yuboradi.

Endi atributga o'tamiz tekislang... U ob'ektlarning gorizontal tekislanishini o'rnatadi va teg e'lonidan keyin mos keladi. Odatda, u tarkibni chapga tekislash uchun ishlatilishi mumkin ( chap), o'ng tomonga tekislangan ( to'g'ri), markazlashtirilgan ( markaz) va matn kengligi ( oqlash).

Quyida men rasm va xatboshi markazlashtiriladigan misol keltiraman.

Ushbu tarkib markazlashtiriladi.

Biz tahlil qilgan atribut rasm uchun biroz boshqacha ma'noga ega ekanligini unutmang.

Men foydalangan misolda hizalamoq \u003d "o'rta "... Bu tasvirni jumla tasvirning o'rtasida aniq bo'lishi uchun moslashtiradi.

CSS-da markazlashtiruvchi vositalar

Bloklarni, matnli va grafik tarkibni tekislash uchun CSS xususiyatlari ancha tez-tez ishlatiladi. Bu, birinchi navbatda, uslublarni amalga oshirishning qulayligi va moslashuvchanligi bilan bog'liq.

Shunday qilib, birinchi matnni markazlashtirish xususiyati bilan boshlaymiz - bu matn-tekislang.

U hizalanish bilan bir xil ishlaydi. Kalit so'zlar orasida siz umumiy ro'yxatdan birini tanlashingiz yoki ajdodning xususiyatlarini meros qilib olishingiz mumkin ( meros).

Shuni ta'kidlashni istardimki, CSS3-da yana ikkita parametr o'rnatilishi mumkin: boshlang - matnni yozish qoidalariga qarab (o'ngdan chapga yoki aksincha) hizalamani chapga yoki o'ngga o'rnatadi (chapga yoki o'ngga o'xshash) va oxiri - boshlanishning teskarisi (matnni chapdan o'ngga yozishda o'ng kabi harakat qiladi, o'ngdan chapga - chapga).

O'ng tomonda taklif qiling

End yordamida jumla

Sizga kichik bir hiyla haqida gapirib beraman. Qiymatni tanlashda oqlash oxirgi satr pastdan chirkin tushishi mumkin. Uni joylashtirish uchun, masalan, markazda siz mulkdan foydalanishingiz mumkin text-align-last.

Sayt tarkibini yoki jadval katakchalarini vertikal ravishda tekislash uchun xususiyatdan foydalaning vertikal tekislash... Quyida men asosiy narsani tasvirlab berdim kalit so'zlar element.

Kalit so'z	Maqsad
boshlang'ich	Asosiy chiziq deb nomlangan ajdodlar qatoriga moslashtirishni belgilaydi. Agar ajdodlar ob'ektida bunday chiziq bo'lmasa, u holda hizalama pastki chegaraga qarab sodir bo'ladi.
o'rta	O'zgaruvchan ob'ektning markazi asosiy elementning balandligi qavati qo'shilgan asosiy chiziq bilan hizalanadi.
pastki	Tanlangan tarkibning pastki qismi ob'ektning pastki qismiga mos keladi.
yuqori	Pastki qismga o'xshash, lekin ob'ektning yuqori qismi bilan.
super	Belgini yuqori belgiga aylantiradi.
sub	Elementni pasaytiradi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

C INE THAQIDATO

C INE THAQIDATO

Chiziq

Va nihoyat, biz xatboshidagi tirqishga keldik. CSS tili deb nomlangan maxsus xususiyatdan foydalanadi matnli indent.

Shu bilan siz qizil chiziqni ham, chiziqni ham qilishingiz mumkin (siz salbiy qiymatni ko'rsatishingiz kerak).

Qizil chiziq yaratish uchun siz bilishingiz kerak bo'lgan bitta parametr mavjud.

Bu oddiy matn-indent xususiyati.