Horizontalno div poravnanje prema središtu css-a. Centriranje diva i druge suptilnosti pozicioniranja

CSS

HTML

Mislim da su se mnogi od vas koji su se morali baviti rasporedom susreli s potrebom okomitog poravnavanja elemenata i poznaju poteškoće koje nastaju prilikom poravnavanja elementa prema sredini.

Da, u CSS-u postoji posebno svojstvo vertikalnog poravnanja s više vrijednosti za okomito poravnanje. Međutim, u praksi to uopće ne funkcionira kako se očekuje. Pokušajmo to shvatiti.

Usporedimo sljedeće pristupe. Poravnajte pomoću:

• stolovi,
• uvlačenje,
• linija-visina
• istezanje,
• negativna margina,
• transformirati
• pseudo element
• flexbox.

Za ilustraciju, razmotrite sljedeći primjer.

Postoje dva div elementa, od kojih je jedan ugniježđen u drugi. Dajmo im odgovarajuće klase – vanjske i unutarnje.

Izazov je poravnati unutarnji element sa središtem vanjskog elementa.

Prvo, razmotrimo slučaj kada su dimenzije vanjskih i unutarnjih blokova znan. Dodajmo pravilo display: inline-block unutarnjem elementu, te text-align: center i vertical-align: middle vanjskom elementu.

Imajte na umu da se poravnanje odnosi samo na elemente koji imaju inline ili inline-block način prikaza.

Postavimo veličine blokova, kao i boje pozadine kako bismo mogli vidjeti njihove granice.

Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnavanje: sredina; boja pozadine: #ffc; ) .unutarnji (zaslon: inline-block; širina: 100px; visina: 100px; boja pozadine : #fcc; )
Nakon primjene stilova, vidjet ćemo da je unutarnji blok poravnat vodoravno, ali ne i okomito:
http://jsfiddle.net/c1bgfffq/

Zašto se to dogodilo? Stvar je u tome što svojstvo vertical-align utječe na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga primjena ovog svojstva na vanjski element nije proizvela ništa. Štoviše, primjena ovog svojstva na unutarnji element također neće učiniti ništa, jer su inline-blokovi poravnati okomito u odnosu na susjedne blokove, au našem slučaju imamo jedan inline blok.

Postoji nekoliko tehnika za rješavanje ovog problema. U nastavku ćemo pobliže pogledati svaku od njih.

Poravnanje pomoću tablice

Prvo rješenje koje pada na pamet je zamijeniti vanjski blok tablicom od jedne ćelije. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutarnji blok.

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

Očigledni nedostatak ovog rješenja je da je, sa semantičkog gledišta, neispravno koristiti tablice za usklađivanje. Drugi nedostatak je što stvaranje tablice zahtijeva dodavanje još jednog elementa oko vanjskog bloka.

Prvi minus se može djelomično ukloniti zamjenom oznaka table i td s div i postavljanjem načina prikaza tablice u CSS-u.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Međutim, vanjski blok će i dalje ostati stol sa svim posljedicama.

Poravnanje pomoću uvlaka

Ako su poznate visine unutarnjeg i vanjskog bloka, tada se poravnanje može postaviti pomoću okomitih uvlaka unutarnjeg bloka pomoću formule: (H vanjski – H unutarnji) / 2.

Vanjski (visina: 200px; ) .unutarnji (visina: 100px; margina: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

Nedostatak rješenja je što je primjenjivo samo u ograničenom broju slučajeva kada su poznate visine obaju blokova.

Poravnanje pomoću visine linije

Ako znate da unutarnji blok ne smije zauzimati više od jednog retka teksta, tada možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da se sadržaj unutarnjeg bloka ne bi trebao prelamati u drugi redak, preporučuje se dodavanje pravila white-space: nowrap i overflow: hidden.

Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (bjelina: nowrap; preljev: skriven;)
http://jsfiddle.net/c1bgfffq/12/

Ova se tehnika također može upotrijebiti za poravnavanje višerednog teksta ako redefinirate vrijednost visine retka za unutarnji blok, te također dodate display: inline-block i vertical-align: središnja pravila.

Vanjski (visina: 200px; visina linije: 200px; ) .unutarnji (visina linije: normalno; prikaz: umetnuti blok; okomito poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/

Nedostatak ove metode je da mora biti poznata visina vanjskog bloka.

Poravnanje pomoću "istezanja"

Ova metoda se može koristiti kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg bloka.

Da biste to učinili potrebno vam je:

1. postavite relativno pozicioniranje vanjskom bloku, a apsolutno pozicioniranje internom bloku;
2. dodajte pravila top: 0 i bottom: 0 unutarnjem bloku, zbog čega će se rastegnuti na cijelu visinu vanjskog bloka;
3. postavite okomito ispunjavanje unutarnjeg bloka na auto.

.outer (position: relative; ) .inner ( height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Ideja koja stoji iza ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje da preglednik izračuna vertikalno ispunjavanje u jednakom omjeru ako je postavljeno na auto.

Usklađivanje s vrhom negativne margine

Ova metoda je postala široko poznata i vrlo se često koristi. Kao i prethodni, koristi se kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg.

Morate postaviti vanjski blok na relativno pozicioniranje, a unutarnji blok na apsolutno pozicioniranje. Zatim trebate pomaknuti unutarnji blok prema dolje za polovicu visine vanjskog vrha bloka: 50% i podići ga za polovicu vlastite visine margin-top: -H unutarnji / 2.

Vanjski (položaj: relativan; ) .unutarnji (visina: 100 px; položaj: apsolutni; vrh: 50%; margin-top: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

Nedostatak ove metode je što se mora znati visina unutarnje jedinice.

Usklađivanje s transformacijom

Ova metoda je slična prethodnoj, ali se može koristiti kada je visina unutarnje jedinice nepoznata. U ovom slučaju, umjesto postavljanja negativnog ispuna piksela, možete koristiti svojstvo transformacije i pomaknuti unutarnji blok prema gore pomoću funkcije translateY i vrijednosti od -50% .

Vanjski ( položaj: relativan; ) .unutarnji ( položaj: apsolutni; vrh: 50%; transformacija: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Zašto je bilo nemoguće postaviti vrijednost kao postotak u prethodnoj metodi? Budući da se postotne vrijednosti margine izračunavaju u odnosu na nadređeni element, vrijednost od 50% bila bi polovica visine vanjske kutije, a morali bismo podići unutarnju kutiju na polovicu vlastite visine. Svojstvo transformacije savršeno je za to.

Nedostatak ove metode je što se ne može koristiti ako unutarnja jedinica ima apsolutno pozicioniranje.

Usklađivanje s Flexboxom

Najmoderniji način okomitog poravnanja je korištenje fleksibilnog rasporeda okvira (popularno poznatog kao Flexbox). Ovaj vam modul omogućuje fleksibilnu kontrolu pozicioniranja elemenata na stranici, raspoređujući ih gotovo bilo gdje. Središnje poravnanje za Flexbox vrlo je jednostavan zadatak.

Vanjski blok treba postaviti na display: flex, a unutarnji blok na margin: auto. I to je sve! Prekrasno, zar ne?

Vanjski (zaslon: savitljiv; širina: 200 piksela; visina: 200 piksela; ) .unutarnji (širina: 100 piksela; margina: automatski; )
http://jsfiddle.net/c1bgfffq/14/

Nedostatak ove metode je što Flexbox podržavaju samo moderni preglednici.

Koju metodu trebam odabrati?

Morate krenuti od izjave problema:

• Za okomito poravnavanje teksta bolje je koristiti okomite uvlake ili svojstvo line-height.
• Za apsolutno pozicionirane elemente s poznatom visinom (na primjer, ikone), metoda s negativnim svojstvom margin-top je idealna.
• Za složenije slučajeve, kada je visina bloka nepoznata, trebate koristiti pseudoelement ili svojstvo transformacije.
• Pa, ako ste toliko sretni da ne trebate podržavati starije verzije IE preglednika, onda je, naravno, bolje koristiti Flexbox.

Danas ćemo se, dragi čitatelju, pozabaviti problemom okomitog poravnanja u bloku div.

Najvjerojatnije već znate za postojanje prekrasnog CSS svojstva okomito poravnati. I sam Bog nam je naredio da koristimo upravo ovo svojstvo za okomito poravnanje (nije uzalud tako razumljivo ime).

Formulacija problema: Morate centrirati sadržaj bloka promjenjive visine u odnosu na vertikalu.

Sada počnimo rješavati problem.

I tako, imamo blok, njegova visina se može promijeniti:

Prvo što vam pada na pamet je napraviti sljedeću fintu:

Postoje svi razlozi za vjerovanje da fraza Blokiraj sadržaj bit će poravnat sa središnjom visinom div spremnika.

Ali nije bilo tamo! Na ovaj način nećemo postići očekivano središnje poravnanje. I zašto? Čini se da je sve ispravno naznačeno. Ispostavilo se da je ovo rub: vlasništvo okomito poravnati može se koristiti samo za poravnavanje sadržaja ćelija tablice ili za međusobno poravnavanje umetnutih elemenata.

Što se tiče poravnanja unutar ćelije tablice, mislim da je sve jasno. Ali objasnit ću još jedan slučaj s inline elementima.

Okomito poravnanje inline elemenata

Pretpostavimo da imate redak teksta koji je razbijen oznakama retka na dijelove:

Vas pozdravlja komad tekst!

Umetnuta oznaka je spremnik čiji izgled ne uzrokuje prelamanje sadržaja u novi redak.

Radnja blok oznake uzrokuje prelamanje sadržaja spremnika u novi redak.

je blok oznaka. Ako dijelove teksta zatvorimo u blokove

, tada će svaki od njih biti u novom retku. Korištenje oznake , koji, za razliku od

, mala su slova, spremnici se neće premjestiti u novi red, svi spremnici ostat će na istoj liniji.

Kontejner praktičan za korištenje kada specificirate dio teksta posebnim oblikovanjem (označite ga bojom, drugim fontom itd.)

Za kontejnere Primijenite sljedeća CSS svojstva:

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

Rezultirajući redak teksta izgledat će ovako:

Ovo nije ništa više od okomitog poravnanja inline elemenata i CSS svojstva okomito poravnati savršeno se nosi s ovim zadatkom.

Malo smo se omesti, sad se vraćamo glavnom zadatku.

Okomito poravnanje u div spremniku

Bez obzira na sve, za poravnanje unutar div spremnika koristit ćemo svojstvo okomito poravnati. Kao što sam već rekao, ovo se svojstvo može koristiti u slučaju poravnavanja inline elemenata (o ovom slučaju smo detaljno raspravljali gore i nije nam prikladan za poravnanje u div spremniku); preostaje samo iskoristiti činjenicu da okomito poravnati radi za ćelije tablice.

Kako ovo možemo koristiti? Nemamo stol, radimo s div spremnikom.

Ha, ispada da je vrlo jednostavno.

CSS svojstvo prikaz omogućuje vam pretvaranje našeg div bloka u ćeliju tablice, to se može učiniti jednostavno i prirodno:

Recimo da imamo klasu div poravnaj tekst:

Za ovaj blok navodimo sljedeće CSS svojstvo:

Textalign (prikaz: tablica-ćelija; )

Ova CSS instrukcija će čudesno pretvoriti naš div u ćeliju tablice bez vizualne promjene na bilo koji način. I za ćeliju tablice možemo primijeniti svojstvo okomito poravnati u potpunosti i željeno okomito poravnanje će funkcionirati.

Ipak, ne može sve tako jednostavno završiti. Imamo prekrasan IE preglednik. Ne zna raditi s imovinom prikaz: tablica-ćelija(Predlažem da pročitate tablicu koja ilustrira funkcionalnost ovog CSS svojstva u različitim preglednicima na web stranici htmlbook.ru). Stoga ćemo morati pribjeći raznim trikovima.

Postoji mnogo načina za postizanje poravnanja u div spremniku za sve preglednike:

• Metoda koja koristi dodatni pomoćni div spremnik
• Metoda koja koristi izraz. To je povezano s lukavim izračunom visina blokova. Ne možete to učiniti bez poznavanja JavaScripta.
• Korištenje svojstva line-height. Ova je metoda prikladna samo za okomito poravnanje u bloku poznate visine i stoga nije primjenjiva u općem slučaju.
• Korištenje apsolutnog i relativnog pomaka sadržaja u slučaju IE preglednika. Ova metoda mi se čini najrazumljivijom i najjednostavnijom. Osim toga, može se implementirati za div spremnik promjenjive visine. Na njemu ćemo se detaljnije zadržati.

Kao što razumijete, samo moramo riješiti problem okomitog poravnanja u IE-u povezan s njegovim nerazumijevanjem svojstva prikaz: tablica-ćelija(ni IE6, ni IE7, ni IE8 nije upoznat s ovim svojstvom). Stoga, koristeći uvjetni komentar Specificirat ćemo različita CSS svojstva posebno za IE preglednike.

Uvjetni komentar

Vrsta konstrukcije:

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

naziva se uvjetni komentar (pazite, tip uvjetnog komentara mora u potpunosti odgovarati navedenom primjeru, do razmaka).

Upute sadržane u takvom uvjetnom komentaru bit će izvršene samo ako preglednik koji tumači ovaj kod pripada obitelji IE.

Dakle, koristeći uvjetni komentar, možemo sakriti dio koda od svih preglednika osim IE.

Rješenje problema

Zbog svog ovog peršina, morat ćemo našem HTML kodu dati dva dodatna spremnika. Ovako će izgledati naš tekstualni blok:

Za klasu div spremnika textalign Postavljena su svojstva CSS-a koja usklađuju njegov sadržaj okomito za sve normalne preglednike (osim IE-a, naravno):

Prikaz: tablica-ćelija; okomito poravnanje: sredina;

I još dva svojstva koja postavljaju širinu i visinu za blok:

Širina:500px; visina: 500px;

To je sasvim dovoljno za poravnanje sadržaja spremnika centrirano u odnosu na vertikalu, u svim preglednicima osim IE.

Sada počinjemo dodavati svojstva koja se odnose na poravnanje za preglednike IE obitelji(za njih smo koristili dodatne blokove div I raspon):

Pozivajući se na oznaku div unutar razrednog bloka textalign. Da biste to učinili, prvo morate naznačiti naziv klase, a zatim, odvojene razmakom, oznaku kojoj pristupamo.

Textalign div (pozicija: apsolutna; vrh: 50%; )

Ovaj dizajn znači: za sve div oznake unutar bloka s klasom textalign primijeniti navedena svojstva.

Sukladno tome, stilovi navedeni za blok textalign su modificirani:

Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; )

Sada je gornja lijeva točka bloka teksta pomaknuta prema dolje za 50%.

Kako bih objasnio što se događa, nacrtao sam ilustraciju:

Kao što vidite na slici, napravili smo određeni napredak. Ali to nije sve! Gornja lijeva točka žutog bloka doista se pomaknula 50% prema dolje, u odnosu na roditeljski (ljubičasti) blok. Ali trebamo da bude na pedeset posto visine ljubičastog bloka. središte žutog bloka, a ne njegovu gornju lijevu točku.

Sada će oznaka ući u igru raspon i njegov relativni položaj:

Raspon poravnanja teksta (položaj: relativno; vrh: -50%; )

Dakle, pomaknuli smo žuti blok prema gore za 50% njegove visine, u odnosu na njegov početni položaj. Kao što razumijete, visina žutog bloka jednaka je visini centriranog sadržaja. A posljednja operacija na spremniku raspona smjestila je naš sadržaj u sredinu ljubičastog bloka. hura!

Hajdemo malo varati

Prije svega, moramo sakriti peršin od svih normalnih preglednika i otvoriti ga za IE. To se može učiniti, naravno, pomoću uvjetnog komentara; nismo uzalud upoznali s njim:

Postoji mali problem. Ako je centrirani sadržaj previsok, to dovodi do neugodnih posljedica: postoji dodatna visina za okomiti pomak.

Rješenje problema: treba dodati svojstvo preljev: skriven blok textalign.

Detaljno upoznajte nekretninu prelijevanje moguće u .

Završne CSS upute za blok textalign ima oblik:

Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; overflow: hidden; border: 1px full black; )

Žao mi je, zaboravio sam spomenuti jednu važnu točku. Ako pokušaš postavite visinu klasnog bloka textalign kao postotak, onda imate ništa neće uspjeti.

Centriranje u bloku promjenjive visine

Vrlo često postoji potreba za postavljanjem visine klasnog bloka textalign ne u pikselima, već kao postotak visine nadređenog bloka i poravnajte sadržaj div spremnika u sredini.

Kvaka je u tome što je to nemoguće učiniti za ćeliju tablice (ali blok klase textalign pretvara točno u ćeliju tablice, zahvaljujući svojstvu display:table-cell).

U tom slučaju morate koristiti vanjski blok za koji je navedeno svojstvo CSS prikaz: stol i već mu postavite postotnu vrijednost visine. Zatim se blok ugniježdio u njega, s CSS direktivom display:table-cell, sretno će naslijediti visinu nadređenog bloka.

Kako bismo implementirali blok promjenjive visine u našem primjeru, malo ćemo urediti CSS:

U razred textalign promijenit ćemo vrijednost imovine prikaz S tablica-ćelija na stol i uklonite direktivu za poravnanje okomito poravnanje: sredina. Sada možemo sigurno promijeniti vrijednost visine s 500 piksela na, na primjer, 100%.

Dakle, CSS svojstva za blok klase textalign izgledat će ovako:

Textalign( display: table; width:500px; height: 100%; position: relative; overflow: hidden; border: 1px full black; )

Ostaje samo implementirati centriranje sadržaja. Da biste to učinili, div spremnik ugniježđen u blok klase textalign(ovo je isti žuti blok na slici), trebate postaviti svojstvo CSS display:table-cell, tada će naslijediti visinu od 100% od roditeljskog bloka textalign(ljubičasti blok). I ništa nas neće spriječiti da uskladimo sadržaj ugniježđenog div spremnika u središtu sa svojstvom okomito poravnanje: sredina.

Dobivamo još jedan dodatni popis CSS svojstava za div blok ugniježđen u spremnik textalign.

Textalign div( display: table-cell; vertical-align: middle; )

To je cijeli trik. Ako želite, možete imati promjenjivu visinu sa sadržajem u sredini.

Za više informacija o okomitom poravnanju bloka promjenjive visine, pogledajte.

Od autora: Ponovno vam želim dobrodošlicu na stranice našeg bloga. U današnjem članku želio bih govoriti o raznim tehnikama poravnanja koje se mogu primijeniti na blokove i njihov sadržaj. Konkretno, kako poravnati blokove u css-u, kao i poravnanje teksta.

Poravnavanje blokova prema sredini

U CSS-u, centriranje bloka je jednostavno. Ovo je mnogima najpoznatija tehnika, ali o njoj bih želio razgovarati prije svega. To znači horizontalno centrirano poravnanje u odnosu na nadređeni element. Kako se to radi? Recimo da imamo spremnik i naš eksperimentalni subjekt je u njemu:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Pretpostavimo da je ovo zaglavlje stranice. Ne proteže se cijelom širinom prozora i trebamo ga centrirati. Pišemo ovako:

#Zaglavlje( širina/maks. širina: 800px; margina: 0 auto;

Moramo odrediti točnu ili maksimalnu širinu, a zatim zapisati svojstvo ključa - margin: 0 auto. Postavlja vanjske margine našeg zaglavlja, prva vrijednost određuje gornju i donju marginu, a druga desnu i lijevu marginu. Vrijednost auto govori pregledniku da automatski izračuna ispunu s obje strane tako da je element točno centriran na roditelju. Udobno!

Poravnanje teksta

Ovo je također vrlo jednostavna tehnika. Za poravnavanje svih umetnutih elemenata, možete koristiti svojstvo poravnanja teksta i njegove vrijednosti: lijevo, desno, središte. Potonji centrira tekst, što je ono što nam treba. Možete čak i poravnati sliku na isti način, jer je ona također inline element prema zadanim postavkama.

Poravnajte tekst okomito

Ali ovo je kompliciranije. Prema zadanim postavkama ne postoji jednostavno, dobro poznato svojstvo koje lako centrira tekst okomito u blok spremniku. Međutim, postoji nekoliko tehnika koje su dizajneri izgleda smislili tijekom godina.

Postavite visinu bloka pomoću ispune. Način nije postaviti eksplicitnu visinu pomoću visine, već je stvoriti umjetno pomoću podstava na vrhu i dnu, koja bi trebala biti ista. Kreirajmo bilo koji blok i napišimo mu sljedeća svojstva:

div( pozadina: #ccc; padding: 30px 0; )

div( pozadina : #ccc; ispuna: 30px 0;

Pozadina služi samo za vizualno prikazivanje rubova kao i podloge. Sada visinu bloka čine ove dvije uvlake i sama linija, a sve to izgleda ovako:

Definirajte visinu linije za blok. Mislim da je ovo ispravniji način ako trebate poravnati jedan redak teksta. Pomoću njega možete pisati visinu prema normali, koristeći svojstvo visine. Nakon toga također treba postaviti visinu linije, kao i visinu bloka u cjelini.

div(visina: 60px; visina linije: 60px; )

div( visina: 60px; line-height: 60px;

Rezultat će biti sličan gornjoj slici. Sve će raditi čak i ako dodate podstavu. Međutim, samo za jednu liniju. Ako trebate više teksta u elementu, tada ova metoda neće raditi.

Pretvorite blok u ćeliju tablice. Bit ove metode je da ćelija tablice ima svojstvo vertical-align: middle, koje okomito centrira element. Sukladno tome, u ovom slučaju blok treba postaviti na sljedeće:

div(prikaz: ćelija-tablica; okomito poravnanje: sredina; )

div( prikaz: tablica - ćelija; okomito - poravnaj : sredina ;

Ova metoda je dobra jer možete poravnati onoliko teksta koliko želite prema sredini. Ali bolje je napisati display: table u bloku u kojem je naš div ugniježđen, inače možda neće raditi.

Pa, dolazimo do posljednje tehnike za danas - ovo je okomito poravnanje samih blokova. Mora se reći da, opet, ne postoji nekretnina koja bi bila namijenjena upravo za to, ali postoji nekoliko trikova koje biste trebali znati.

Postavite uvlake kao postotak. Ako znate visinu nadređenog elementa i postavite drugi blok element unutar njega, možete ga centrirati pomoću postotnog ispuna. Na primjer, roditelj ima visinu od 600 piksela. U njega postavite blok visok 300 piksela. Koliko se trebate odmaknuti pri vrhu i dnu da biste ga centrirali? 150 piksela svaki, što je 25% visine roditelja.

Ova metoda dopušta poravnanje samo kada dimenzije dopuštaju izračune. A ako je vaš roditelj visok 887 piksela, onda nećete moći točno snimiti ništa, to je već jasno.

Umetanje elementa u ćeliju tablice. Opet, ako transformiramo nadređeni element u ćeliju tablice, tada će blok umetnut u nju biti automatski centriran okomito. Da biste to učinili, roditelj samo treba postaviti vertical-align: middle.

A ako uz ovo napišemo i margin: 0 auto, tada će element postati horizontalno centriran!

Poravnajte tekst okomito u CSS-u- vrlo težak posao. Vidio sam dovoljno ljudi koji se bore s tim da stalno pronalazim "kritične" pogreške kada je riječ o stvarnom responzivnom dizajnu.

Ali ne bojte se: ako se već mučite s okomitim CSS poravnanjem, došli ste na pravo mjesto.

Razgovarajmo o CSS svojstvu vertikalnog poravnanja

Kad sam tek počeo raditi u web razvoju, malo sam se borio s ovim svojstvom. Mislio sam da bi trebalo funkcionirati kao klasično vlasništvo" poravnanje teksta" Oh, kad bi samo sve bilo tako jednostavno...

svojstvo CSS okomitog poravnanja radi izvrsno s tablicama, ali ne s divovima ili drugim elementima. Kada ga koristite na divu, on poravnava element u odnosu na druge divove, ali ne i njegov sadržaj. U ovom slučaju, svojstvo radi samo s display: inline-block; .

Pogledajte primjer

Želimo centrirati sadržaj, a ne sam div!

Imate dvije mogućnosti. Ako imate samo div elemente s tekstom, tada možete koristiti svojstvo line-height. To znači da trebate znati visinu elementa, ali je ne možete postaviti. Tako će vaš tekst uvijek biti u središtu.

Istina o ovom pristupu CSS okomito poravnanje postoji nedostatak. Ako je tekst višeredni, tada će se visina retka pomnožiti s brojem redaka. Najvjerojatnije ćete u ovom slučaju završiti s užasno raspoređenom stranicom.

Pogledajte ovaj primjer

Ako se sadržaj koji želite centrirati sastoji od više od jednog retka, onda je bolje koristiti div tablice. Možete koristiti i tablice, ali to nije semantički ispravno. Ako su vam potrebni prekidi za responzivne svrhe, bolje je koristiti div elemente.

Da bi ovo funkcioniralo, mora postojati nadređeni spremnik s display: table i unutar njega željenim brojem stupaca koje želite centrirati pomoću display: table-cell i vertical-align: middle .

Pogledajte primjer

Zašto ovo funkcionira s oznakom tablice, ali ne i s elementima div? Zato što su redovi u tablici iste visine. Kada sadržaj ćelije tablice ne koristi sav raspoloživi visinski prostor, preglednik automatski dodaje okomito ispunjavanje radi centriranja sadržaja.

pozicija imovine

Počnimo s osnovama okomitog poravnanja CSS divova:

• položaj: statički je zadani. Element se prikazuje prema HTML redoslijedu;
• pozicija: apsolutna - koristi se za određivanje točne pozicije elementa. Ovaj položaj je uvijek povezan s najbližim relativno pozicioniranim roditeljskim elementom (ne statički). Ako ne odredite točan položaj elementa, izgubit ćete kontrolu nad njim. Pojavit će se nasumično, potpuno zanemarujući tijek dokumenta. Prema zadanim postavkama, element se pojavljuje u gornjem lijevom kutu;
• položaj: relativan - koristi se za pozicioniranje elementa u odnosu na njegov normalni položaj (statičan). Ova vrijednost čuva redoslijed toka dokumenta;
• pozicija: fiksna - koristi se za pozicioniranje elementa u odnosu na prozor preglednika tako da uvijek bude vidljiv u okviru za prikaz.

Napomena: neka svojstva ( vrh i z-indeks) rade samo ako je element postavljen na položaj (ne statički).

Primimo se posla!

Želite li implementirati CSS okomito središnje poravnanje? Najprije izradite element s relativnim položajem i dimenzijama. Na primjer: 100% širine i visine.

Drugi korak može varirati ovisno o ciljanim preglednicima, ali možete koristiti jednu od dvije opcije:

• Staro svojstvo: potrebno je znati točnu veličinu prozora kako bi se uklonila pola širine i pola visine. Pogledajte primjer;
• Novo svojstvo CSS3: Možete dodati svojstvo transformacije s vrijednošću prevođenja od 50% i blok će uvijek biti u središtu. Pogledaj primjer.

U osnovi, ako želite centrirati sadržaj, nikad ne koristi vrh: 40% ili lijevo: 300px . Ovo radi dobro na testnim zaslonima, ali nije centrirano.

Zapamtite položaj: fiksno? S njim možete učiniti isto što i s apsolutnim položajem, ali ne trebate relativni položaj za nadređeni element - on će uvijek biti postavljen relativno u odnosu na prozor preglednika.

Jeste li čuli za specifikaciju flexboxa?

Možete koristiti flexbox. Ovo je puno bolje od bilo koje druge opcije središnje poravnanje teksta CSS okomito. Uz flexbox, upravljanje elementima je poput dječje igre. Problem je u tome što neke preglednike treba odbaciti, kao što je IE9 i verzije ispod. Evo primjera okomitog centriranja bloka:

Pogledaj primjer

Koristeći flexbox izgled, možete centrirati više blokova.

Ako primijenite ono što ste naučili iz ovih primjera, možete svladati CSS okomito poravnanje blokovačim prije.

Veze i dodatna literatura

Učenje CSS označavanja

FlexBox Froggy

Flexbox sandbox

Prijevod članka “ CSS okomito poravnanje za svakoga (uključujući lutke)” pripremio je ljubazni projektni tim.

Mislim da su se mnogi od vas koji su se morali baviti rasporedom susreli s potrebom okomitog poravnavanja elemenata i poznaju poteškoće koje nastaju prilikom poravnavanja elementa prema sredini.

Da, u CSS-u postoji posebno svojstvo vertikalnog poravnanja s više vrijednosti za okomito poravnanje. Međutim, u praksi to uopće ne funkcionira kako se očekuje. Pokušajmo to shvatiti.

Usporedimo sljedeće pristupe. Poravnajte pomoću:

• stolovi,
• uvlačenje,
• linija-visina
• istezanje,
• negativna margina,
• transformirati
• pseudo element
• flexbox.

Za ilustraciju, razmotrite sljedeći primjer.

Postoje dva div elementa, od kojih je jedan ugniježđen u drugi. Dajmo im odgovarajuće klase – vanjske i unutarnje.

Izazov je poravnati unutarnji element sa središtem vanjskog elementa.

Prvo, razmotrimo slučaj kada su dimenzije vanjskih i unutarnjih blokova znan. Dodajmo pravilo display: inline-block unutarnjem elementu, te text-align: center i vertical-align: middle vanjskom elementu.

Imajte na umu da se poravnanje odnosi samo na elemente koji imaju inline ili inline-block način prikaza.

Postavimo veličine blokova, kao i boje pozadine kako bismo mogli vidjeti njihove granice.

Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnavanje: sredina; boja pozadine: #ffc; ) .unutarnji (zaslon: inline-block; širina: 100px; visina: 100px; boja pozadine : #fcc; )
Nakon primjene stilova, vidjet ćemo da je unutarnji blok poravnat vodoravno, ali ne i okomito:
http://jsfiddle.net/c1bgfffq/

Zašto se to dogodilo? Stvar je u tome što svojstvo vertical-align utječe na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga primjena ovog svojstva na vanjski element nije proizvela ništa. Štoviše, primjena ovog svojstva na unutarnji element također neće učiniti ništa, jer su inline-blokovi poravnati okomito u odnosu na susjedne blokove, au našem slučaju imamo jedan inline blok.

Postoji nekoliko tehnika za rješavanje ovog problema. U nastavku ćemo pobliže pogledati svaku od njih.

Poravnanje pomoću tablice

Prvo rješenje koje pada na pamet je zamijeniti vanjski blok tablicom od jedne ćelije. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutarnji blok.

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

Očigledni nedostatak ovog rješenja je da je, sa semantičkog gledišta, neispravno koristiti tablice za usklađivanje. Drugi nedostatak je što stvaranje tablice zahtijeva dodavanje još jednog elementa oko vanjskog bloka.

Prvi minus se može djelomično ukloniti zamjenom oznaka table i td s div i postavljanjem načina prikaza tablice u CSS-u.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Međutim, vanjski blok će i dalje ostati stol sa svim posljedicama.

Poravnanje pomoću uvlaka

Ako su poznate visine unutarnjeg i vanjskog bloka, tada se poravnanje može postaviti pomoću okomitih uvlaka unutarnjeg bloka pomoću formule: (H vanjski – H unutarnji) / 2.

Vanjski (visina: 200px; ) .unutarnji (visina: 100px; margina: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

Nedostatak rješenja je što je primjenjivo samo u ograničenom broju slučajeva kada su poznate visine obaju blokova.

Poravnanje pomoću visine linije

Ako znate da unutarnji blok ne smije zauzimati više od jednog retka teksta, tada možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da se sadržaj unutarnjeg bloka ne bi trebao prelamati u drugi redak, preporučuje se dodavanje pravila white-space: nowrap i overflow: hidden.

Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (bjelina: nowrap; preljev: skriven;)
http://jsfiddle.net/c1bgfffq/12/

Ova se tehnika također može upotrijebiti za poravnavanje višerednog teksta ako redefinirate vrijednost visine retka za unutarnji blok, te također dodate display: inline-block i vertical-align: središnja pravila.

Vanjski (visina: 200px; visina linije: 200px; ) .unutarnji (visina linije: normalno; prikaz: umetnuti blok; okomito poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/

Nedostatak ove metode je da mora biti poznata visina vanjskog bloka.

Poravnanje pomoću "istezanja"

Ova metoda se može koristiti kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg bloka.

Da biste to učinili potrebno vam je:

1. postavite relativno pozicioniranje vanjskom bloku, a apsolutno pozicioniranje internom bloku;
2. dodajte pravila top: 0 i bottom: 0 unutarnjem bloku, zbog čega će se rastegnuti na cijelu visinu vanjskog bloka;
3. postavite okomito ispunjavanje unutarnjeg bloka na auto.

.outer (position: relative; ) .inner ( height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Ideja koja stoji iza ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje da preglednik izračuna vertikalno ispunjavanje u jednakom omjeru ako je postavljeno na auto.

Usklađivanje s vrhom negativne margine

Ova metoda je postala široko poznata i vrlo se često koristi. Kao i prethodni, koristi se kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg.

Morate postaviti vanjski blok na relativno pozicioniranje, a unutarnji blok na apsolutno pozicioniranje. Zatim trebate pomaknuti unutarnji blok prema dolje za polovicu visine vanjskog vrha bloka: 50% i podići ga za polovicu vlastite visine margin-top: -H unutarnji / 2.

Vanjski (položaj: relativan; ) .unutarnji (visina: 100 px; položaj: apsolutni; vrh: 50%; margin-top: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

Nedostatak ove metode je što se mora znati visina unutarnje jedinice.

Usklađivanje s transformacijom

Ova metoda je slična prethodnoj, ali se može koristiti kada je visina unutarnje jedinice nepoznata. U ovom slučaju, umjesto postavljanja negativnog ispuna piksela, možete koristiti svojstvo transformacije i pomaknuti unutarnji blok prema gore pomoću funkcije translateY i vrijednosti od -50% .

Vanjski ( položaj: relativan; ) .unutarnji ( položaj: apsolutni; vrh: 50%; transformacija: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Zašto je bilo nemoguće postaviti vrijednost kao postotak u prethodnoj metodi? Budući da se postotne vrijednosti margine izračunavaju u odnosu na nadređeni element, vrijednost od 50% bila bi polovica visine vanjske kutije, a morali bismo podići unutarnju kutiju na polovicu vlastite visine. Svojstvo transformacije savršeno je za to.

Nedostatak ove metode je što se ne može koristiti ako unutarnja jedinica ima apsolutno pozicioniranje.

Usklađivanje s Flexboxom

Najmoderniji način okomitog poravnanja je korištenje fleksibilnog rasporeda okvira (popularno poznatog kao Flexbox). Ovaj vam modul omogućuje fleksibilnu kontrolu pozicioniranja elemenata na stranici, raspoređujući ih gotovo bilo gdje. Središnje poravnanje za Flexbox vrlo je jednostavan zadatak.

Vanjski blok treba postaviti na display: flex, a unutarnji blok na margin: auto. I to je sve! Prekrasno, zar ne?

Vanjski (zaslon: savitljiv; širina: 200 piksela; visina: 200 piksela; ) .unutarnji (širina: 100 piksela; margina: automatski; )
http://jsfiddle.net/c1bgfffq/14/

Nedostatak ove metode je što Flexbox podržavaju samo moderni preglednici.

Koju metodu trebam odabrati?

Morate krenuti od izjave problema:

• Za okomito poravnavanje teksta bolje je koristiti okomite uvlake ili svojstvo line-height.
• Za apsolutno pozicionirane elemente s poznatom visinom (na primjer, ikone), metoda s negativnim svojstvom margin-top je idealna.
• Za složenije slučajeve, kada je visina bloka nepoznata, trebate koristiti pseudoelement ili svojstvo transformacije.
• Pa, ako ste toliko sretni da ne trebate podržavati starije verzije IE preglednika, onda je, naravno, bolje koristiti Flexbox.

Oznake: Dodajte oznake