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. Usklađivanje sa:

• 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 tako da možemo vidjeti njihove granice.

Vanjski (širina: 200 px; visina: 200 px; poravnanje teksta: središte; okomito poravnanje: sredina; boja pozadine: #ffc; ) .unutarnji (zaslon: inline-block; širina: 100 px; visina: 100 px; 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 poravnanje. 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 line-height

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 visina vanjskog bloka mora biti poznata.

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 u prethodnoj metodi nije bilo moguće postaviti vrijednost kao postotak? 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.

Horizontalno poravnanje sadržaja, koje ima svojstvo float, može se izvesti vrlo jednostavno i također je u potpunosti cross-browser (radi u Operi 8+, Firefox 3+, IE 5.5+).

Primjer poravnanja div blokova

Za poravnavanje plutajućeg bloka ili više blokova u nizu, potreban vam je još jedan vanjski blok. Vanjskom bloku i unutarnjim blokovima dodijeljen je položaj: apsolutni; i plovak: lijevo; , dodijelite vanjsko lijevo: 50%; , a za unutarnje blokove desno: 50%; . Za korištenje float: desno; potreba za dodjeljivanjem vanjskog prava dodjele: 50%; , a za unutarnje blokove lijevo: 50%; . Preporučujem brisanje floata postavljanjem bloka sa svojstvom clear: both nakon središnje poravnatih elemenata. .

Na ovaj način možete postići sljedeće centriranje:

Unutarnji blok s id = block-inner ima zeleni obrub, vanjski blok s id = block ima isprekidan crveni obrub.

#block (položaj: relativan; float: lijevo; lijevo: 50%; obrub: 1px isprekidano #a00; ) #block-inner (položaj: relativan; float: lijevo; desno: 50%; obrub: 2px puna #0a0; ispuna : 10px; #stranica (overflow: hidden; )

Primjer poravnanja stavki izbornika

U praksi se gornji primjer može primijeniti pri vodoravnom poravnavanju izbornika stranice. Međutim, morate uzeti u obzir da se s dovoljno velikim brojem stavki (koje zauzimaju više od polovice stranice u širini) pojavljuje horizontalno pomicanje. Da biste ga se riješili, morate primijeniti svojstvo overflow u vanjskom bloku. Ako je izbornik padajući izbornik, tada njegove padajuće stavke mogu biti odrezane ovim vanjskim blokom. Da biste izbjegli ovaj problem, trebate primijeniti svojstvo overflow na blok koji je što je moguće veći, na primjer, krajnji blok koji uokviruje cijeli sadržaj stranice.

Na primjer, možete poravnati izbornik ovako:

Stavke li popisa ul imaju zeleni obrub, a popis ul ima isprekidani crveni obrub.

HTML kôd za primjer u nastavku izgleda ovako:

CSS kod za primjer u nastavku izgleda ovako:

#menu (položaj: relativan; float: lijevo; lijevo: 50%; obrub: 1px isprekidano #a00; list-style: nijedan; margina: 0; padding: 0; ) #menu li (position: relative; float: lijevo; desno: 50%; rub: 2px solid #0a0; padding: #page (overflow: hidden; )

Dakle, prilično je jednostavno. Želim vam uspjeh u svladavanju novih metoda.

Horizontalno i okomito poravnavanje elemenata može se izvesti na različite načine. Izbor metode ovisi o vrsti elementa (blok ili inline), vrsti njegovog pozicioniranja, veličini itd.

1. Horizontalno poravnanje prema središtu bloka/stranice

1.1. Ako je navedena širina bloka:

div ( širina: 300px; margina: 0 auto; /*centrirajte element vodoravno unutar nadređenog bloka*/)

Ako želite poravnati inline element na ovaj način, potrebno ga je postaviti na prikaz: blok;

1.2. Ako je blok ugniježđen unutar drugog bloka, a njegova širina nije navedena/određena:

.wrapper(text-align: center;)

1.3. Ako blok ima širinu i mora biti centriran na roditeljski blok:

.wrapper (pozicija: relativna; /*postavi relativnu poziciju za nadređeni blok tako da onda možemo apsolutno pozicionirati blok unutar njega*/) .box ( širina: 400px; pozicija: apsolutna; lijevo: 50%; margin-lijevo: -200px; / *pomaknite blok ulijevo za udaljenost jednaku polovici njegove širine*/ )

1.4. Ako blokovi nemaju navedenu širinu, možete ih centrirati pomoću nadređenog bloka omotača:

.wrapper (text-align: center; /*smjesti sadržaj bloka u središte*/) .box ( display: inline-block; /*poredi blokove u niz vodoravno*/ margin-desno: -0.25em ; /*ukloni pravi razmak između blokova*/ )

2. Okomito poravnanje

2.1. Ako tekst zauzima jedan red, na primjer, za gumbe i stavke izbornika:

.button (visina: 50px; visina linije: 50px;)

2.2. Za okomito poravnanje bloka unutar nadređenog bloka:

.wrapper (pozicija: relativna;).box ( visina: 100px; pozicija: apsolutna; vrh: 50%; margina: -50px 0 0 0; )

2.3. Okomito poravnanje prema vrsti tablice:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. Ako blok ima zadanu širinu i visinu i mora biti centriran na roditeljski blok:

.wrapper (position: relative; ) .box ( height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*to sadržaj se nije proširio */ )

2.5. Apsolutno pozicioniranje u središtu stranice/bloka pomoću CSS3 transformacije:

ako su za element navedene dimenzije

div ( width: 300px; /*postavi širinu bloka*/ height:100px; /*postavi visinu bloka*/ transform: translate(-50%, -50%); position: absolute; top: 50 %; lijevo: 50% ;

ako element nema dimenzija i nije prazan

h1 (margina: 0; transformacija: translate(-50%, -50%); pozicija: apsolutna; vrh: 50%; lijevo: 50%; )

Vrlo često zadatak je poravnati blok u središtu stranice/zaslona, ​​pa čak i tako da bez Java skripte, bez postavljanja krutih dimenzija ili negativnih uvlaka, i tako da klizne trake rade za roditelja ako blok premaši svoju veličinu . Na internetu postoji dosta monotonih primjera o tome kako blok poravnati prema sredini ekrana. U pravilu se većina njih temelji na istim načelima.

Ispod su glavni načini rješavanja problema, njihove prednosti i mane. Da biste razumjeli bit primjera, preporučujem smanjenje visine/širine prozora s rezultatima u primjerima na navedenim poveznicama.

Opcija 1: Negativno uvlačenje.

Pozicioniranje blok koristeći gornje i lijeve atribute za 50%, i unaprijed znajući visinu i širinu bloka, postavite negativnu marginu, koja je jednaka polovici veličine blok. Veliki nedostatak ove opcije je što morate brojati negativne uvlake. Također blok ne ponaša se sasvim ispravno kada je okružen trakama za pomicanje - jednostavno je odrezan jer ima negativne margine.

Roditelj ( širina: 100%; visina: 100%; položaj: apsolutni; vrh: 0; lijevo: 0; preljev: automatski; ) .block ( širina: 250px; visina: 250px; položaj: apsolutni; vrh: 50%; lijevo : 50%; margina: -125px 0 0 -125px; img (max-width: 100%; height: auto; margin: 0 auto; border: none; ) )

Opcija 2. Automatsko uvlačenje.

Manje uobičajeno, ali slično prvom. Za blok postavljamo širinu i visinu, postavljamo atribute gore desno dolje lijevo na 0 i postavljamo marginu auto. Prednost ove opcije su radne trake za pomicanje roditelj, ako potonji ima 100% širine i visine. Nedostatak ove metode je kruto postavljanje dimenzija.

Roditelj ( širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo: 0; preljev: auto; ) .block ( širina: 250px; visina: 250px; pozicija: apsolutna; vrh: 0; desno: 0; dno: 0; margina: auto; img (max-width: 100%; display: block; margin: none; )

Opcija 3. Tablica.

Pitajmo roditelj stolni stilovi, stanica roditelj Postavite poravnanje teksta na sredinu. A blok postavljamo linijski blok model. Nedostaci koje dobivamo su neradne trake za pomicanje, a općenito, estetika "emulacije" tablice nije.

Roditelj ( širina: 100%; visina: 100%; prikaz: tablica; položaj: apsolutni; vrh: 0; lijevo: 0; > .unutarnji ( prikaz: ćelija-tablice; poravnanje teksta: središte; okomito poravnavanje: sredina; ) ) .block ( prikaz: inline-block; img ( prikaz: blok; granica: ništa; ) )

Da biste ovom primjeru dodali svitak, morat ćete dodati još jedan element dizajnu.
Primjer: jsfiddle.net/serdidg/fk5nqh52/3.

Opcija 4. Pseudo-element.

Ova opcija je lišena svih problema navedenih u prethodnim metodama, a također rješava izvorne probleme. Poanta je u tome roditelj postaviti stilove pseudo element prije, naime 100% visina, središnje poravnanje i inline blok model. Isto je i sa blok postavljen je linijski blok model, centriran. Do blok nije "pao" ispod pseudo element, kada su dimenzije prvog veće od roditelj, naznačiti roditelj white-space: nowrap i font-size: 0, nakon čega blok poništite ove stilove sa sljedećim - white-space: normal. U ovom primjeru, font-size: 0 je potreban za uklanjanje rezultirajućeg razmaka između roditelj I blok zbog oblikovanja koda. Prostor se može ukloniti i na druge načine, no smatra se da ga je najbolje jednostavno izbjegavati.

Roditelj ( širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo: 0; preljev: automatski; razmak: nowrap; poravnanje teksta: središte; veličina fonta: 0; &:prije ( visina: 100%; okomito poravnanje: ""; slika: obrub;

Ili, ako trebate da roditelj zauzima samo visinu i širinu prozora, a ne cijelu stranicu:

Roditelj (položaj: fiksno; gore: 0; desno: 0; dolje: 0; lijevo: 0; preljev: automatski; razmak: nowrap; poravnanje teksta: središte; veličina fonta: 0; &:prije ( visina: 100%; display: inline-block; vertical-align: content: "" (prikaz: block; none; ) )

Opcija 5. Flexbox.

Jedan od najjednostavnijih i najelegantnijih načina je korištenje flexboxa. Ne zahtijeva nepotrebne pokrete tijela, prilično jasno opisuje bit onoga što se događa i vrlo je fleksibilan. Jedina stvar koju vrijedi zapamtiti pri odabiru ove metode je podrška za IE od verzije 10 uključivo. caniuse.com/#feat=flexbox

Roditelj ( širina: 100%; visina: 100%; položaj: fiksno; vrh: 0; lijevo: 0; prikaz: savitljivost; poravnavanje stavki: središte; poravnavanje sadržaja: središte; opravdavanje sadržaja: središte; preljev: automatski; ) .block ( pozadina: #60a839; img ( prikaz: blok; granica: nema; ))

Opcija 6. Transformacija.

Prikladno ako smo ograničeni strukturom i ne postoji način da se manipulira nadređenim elementom, ali blok treba nekako poravnati. U pomoć će doći css funkcija translate(). Vrijednost od 50% apsolutnog pozicioniranja postavit će gornji lijevi kut bloka točno u središte, a zatim će negativna vrijednost prevođenja pomaknuti blok u odnosu na vlastite dimenzije. Imajte na umu da se mogu pojaviti negativni učinci u obliku zamućenih rubova ili stila fonta. Također, ova metoda može dovesti do problema s izračunavanjem položaja bloka pomoću java-skripte. Ponekad, kako bi se nadoknadio gubitak od 50% širine zbog upotrebe CSS svojstva lijevo, pravilo navedeno za blok može. pomoć: margin-desno: -50% ;

Roditelj ( širina: 100%; visina: 100%; položaj: fiksno; vrh: 0; lijevo: 0; preljev: automatski; ) .block ( položaj: apsolutni; vrh: 50%; lijevo: 50%; transformacija: prevedi( -50%, -50%); img (prikaz: blok; ) )

Opcija 7. Gumb.

Korisnik azproduction opcija gdje blok uokviren u oznaku gumba. Gumb ima svojstvo centriranja svega što se nalazi unutar njega, odnosno elemenata inline i blok-linijskog (inline-block) modela. U praksi ne preporučam njegovu upotrebu.

Roditelj ( širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo: 0; preljev: automatski; pozadina: ništa; obrub: ništa; obris: ništa; ) .block ( prikaz: inline-block; img (prikaz: blok;; granica: nema; ) )

Bonus

Koristeći ideju 4. opcije, možete postaviti vanjske margine za blok, a potonji će biti primjereno prikazan okružen trakama za pomicanje.
Primjer: jsfiddle.net/serdidg/nfqg9rza/2.

Također možete poravnati sliku prema sredini, a ako je slika veća roditelj, smanjite ga na veličinu roditelj.
Primjer: jsfiddle.net/serdidg/nfqg9rza/3.
Primjer s velikom slikom:

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 svom 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 ugrađeni 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 koristeći visinu, već je stvoriti umjetno koristeći podstave na vrhu i dnu, koje bi trebale biti iste. 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. Uz to, možete zabilježiti visinu kao i obično 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 - poravnati: sredina;

Ova metoda je dobra jer možete poravnati koliko god želite teksta u 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!