Horizontalno i vertikalno poravnanje elemenata. vertikalno poravnanje u div

Često, prilikom postavljanja, postoji potreba za vertikalnim poravnanjem teksta u bloku. Ako ovo treba da se uradi u ćeliji tabele, tada se postavlja vrednost svojstva CSS vertikalno poravnanje.

Ali postavlja se razumno pitanje, da li je moguće bez tabele, bez preopterećenja oznake stranice nepotrebnim oznakama? Odgovor je „možete“, ali zbog loše podrške za CSS u MSIE-u, rješenje problema za njega će se razlikovati od rješenja za druge uobičajene pretraživače.

Kao primjer, razmotrite sljedeći isječak:

i pokušajte vertikalno poravnati tekst sa središtem okvira i na dnu okvira.

Rješenje problema

"Pravi" pretraživači (uključujući MSIE

Većina modernih pretraživača podržava CSS2.1, odnosno vrijednost ćelije tabele za svojstvo prikaza. Ovo nam daje mogućnost da prisilimo blok s tekstom da se prikaže kao ćelija tabele i, koristeći ovo, poravnamo tekst okomito:

div (
display:table-cell;
vertikalno poravnanje: sredina;
}

div (
display:table-cell;
vertikalno poravnanje: dno;
}

Internet Explorer (uključivo do verzije 7)

Da biste riješili problem poravnanja teksta na dnu bloka u MSIE, možete koristiti apsolutno pozicioniranje (ovdje nam je potreban inline element ugniježđen u blok):

div (
položaj: relativan;
}
div span(
display:block;
pozicija: apsolutna;
dno: 0%;
lijevo: 0%
širina: 100%
}

Ovaj skup pravila funkcioniše iu "ispravnim" pretraživačima.

Navedite svojstva

div span (
display:block;
širina: 100%
}

nisu potrebni, ali mogu biti potrebni ako planirate koristiti horizontalno poravnanje teksta uz vertikalno poravnavanje teksta, na primjer, text-align: center ;.

Da biste vertikalno poravnali tekst u sredini bloka, originalni fragment će i dalje morati biti kompliciran - uvedemo još jedan inline element:

Materijal za učenje:

• Vertikalno centriranje u CSS-u (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Vertikalno centriranje pomoću CSS-a (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Vertikalno poravnanje (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Drugi način za vertikalno poravnanje u CSS-u (cssing.org.ua/2007/04/26/another-css-valign-method)

Vrlo često u rasporedu je potrebno centrirati neki element horizontalno i/ili okomito. Stoga sam odlučio napraviti članak sa raznim metodama centriranja, tako da sve bude pri ruci na jednom mjestu.

Horizontalno poravnanje

margina: auto

Horizontalno poravnanje sa marginom se koristi kada je poznata širina centralnog elementa. Radi za blok elemente:

Elem ( margina-lijevo: auto; margin-desno: auto; širina: 50%; )

Navođenje automatske vrijednosti desnog i lijevog dopuna čini ih jednakim, što centrira element horizontalno unutar roditeljskog bloka.

text-align: centar

Ova metoda je prikladna za centriranje teksta unutar bloka. text-align: centar:

pozicija i negativna margina lijevo

Pogodno za centrirane blokove poznate širine. Roditeljski blok postavljamo na poziciju: relativno u odnosu na nju, centralni element na poziciju: apsolutnu, lijevo: 50% i negativnu marginu-left, čija je vrijednost jednaka polovini širine elementa:

prikaz: inline-block + text-align: centar

Metoda je prikladna za poravnavanje blokova nepoznate širine, ali zahtijeva roditeljski omotač. Na primjer, ovako možete centrirati horizontalni meni:

• Dom
• o autoru

Vertikalno poravnanje

visina linije

Da biste poravnali jedan red teksta, možete koristiti iste vrijednosti visine i razmaka za roditeljski blok. Pogodno za dugmad, stavke menija itd.

pozicija i negativna marža gore

Element se može vertikalno poravnati dajući mu fiksnu visinu i položaj primjene: apsolutna i negativna margina jednaka polovini visine elementa koji se poravnava. Roditeljskom bloku treba dati poziciju: relativno:

Omot (pozicija: relativna; ) elem (visina: 200px; margina: -100px 0 0; pozicija: apsolutna; vrh: 50%; )

Tako, koristeći pozicioniranje i negativne margine, možete centrirati element na stranici.

displej: ćelija tabele

Za vertikalno poravnanje, svojstvo display: table-cell se primenjuje na element, što ga čini da emulira ćeliju tabele. Također postavljamo visinu i vertikalno poravnanje: sredinu na nju. Sve ćemo ovo umotati u kontejner sa svojstvom dislpay: table; :

Dinamički poravnajte element na stranici

Pogledali smo načine za poravnavanje elemenata na stranici pomoću CSS-a. Pogledajmo sada jQuery implementaciju.

Dodajmo jQuery na stranicu:

Predlažem da napišete jednostavnu funkciju za centriranje elementa na stranici, nazovimo je alignCenter() . Sam element djeluje kao argument funkciji:

Funkcija alignCenter(elem) ( // kod ovdje)

U tijelu funkcije, dinamički izračunajte i dodijelite koordinate centra stranice lijevom i gornjem CSS svojstvu:

Funkcija alignCenter(elem) ( elem.css(( lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem. height()) / 2 + "px" // ne zaboravite dodati position: absolute elementu da pokrene koordinate )) )

U prvom redu funkcije dobivamo širinu dokumenta i oduzimamo od nje širinu elementa, podijeljenu na pola - to će biti horizontalni centar stranice. Druga linija radi isto, samo sa visinom koja se poravnava okomito.

Funkcija je spremna, ostaje je objesiti na događaje spremnosti DOM-a i promjene veličine prozora:

$(function() ( // pozovite funkciju centriranja kada je DOM spreman alignCenter($(elem)); // pozovite funkciju kada se promijeni veličina prozora $(window).resize(function() ( alignCenter($( elem)); )) // funkcija centriranje elementa funkcija alignCenter(elem) ( elem.css(( // izračunavanje lijeve i gornje koordinate lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem.height()) / 2 + "px" ))) ) ))

Primjena Flexboxa

Nove CSS3 funkcije kao što je Flexbox polako dolaze u mainstream. Tehnologija pomaže u kreiranju oznake bez upotrebe plutajućih, pozicioniranja itd. Može se koristiti i za centriranje elemenata. Na primjer, primijenimo Flexbox na roditeljski .wrapper element i centriramo sadržaj unutar:

Omotač ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; visina: 500px; širina: 500px; ) .wrapper .content ( margin: auto; /* margina: 0 auto; samo horizontalno */ /* margina: auto 0; samo okomito */ )

Ovo pravilo istovremeno centrira element horizontalno i okomito - margina sada radi ne samo za horizontalno, već i za vertikalno poravnanje. I bez poznate širine/visine.

Related Resources

Pomozite projektu

Centriranje elemenata okomito sa CSS-om je izazov za programere. Međutim, postoji nekoliko metoda za njegovo rješavanje, koje su prilično jednostavne. Ova lekcija predstavlja 6 opcija za vertikalno centriranje sadržaja.

Počnimo s općim opisom problema.

Problem vertikalnog centriranja

Horizontalno centriranje je vrlo jednostavno i lako. Kada je centrirani element inline, koristite svojstvo poravnanja u odnosu na roditeljski element. Kada je element blok - postavite njegovu širinu i automatski postavite lijevu i desnu marginu.

Većina ljudi, kada koristi svojstvo text-align:, poziva se na svojstvo vertical-align za vertikalno centriranje. Sve izgleda sasvim logično. Ako ste koristili predloške tablica, vjerovatno ste intenzivno koristili atribut valign, što učvršćuje uvjerenje da je vertikalno poravnanje pravi put.

Ali atribut valign radi samo na ćelijama tablice. I svojstvo vertikalnog poravnanja je vrlo slično. Takođe utiče na ćelije tabele i neke inline elemente.

Vrijednost svojstva vertikalnog poravnanja je relativna u odnosu na roditeljski inline element.

• U redu teksta, poravnanje je relativno u odnosu na visinu reda.
• Ćelija tabele koristi poravnanje u odnosu na vrednost izračunatu posebnim algoritmom (obično se dobija visina linije).

Ali, nažalost, svojstvo vertikalnog poravnanja ne radi na elementima na nivou bloka (kao što su paragrafi unutar elementa div). Ova situacija može dovesti do ideje da ne postoji rješenje za problem vertikalnog poravnanja.

Ali postoje i druge metode centriranja elemenata na nivou bloka, čiji izbor zavisi od toga šta se centrira u odnosu na spoljašnji kontejner.

metoda visine linije

Ova metoda radi kada želite okomito centrirati jedan red teksta. Sve što treba da uradite je da podesite visinu reda da bude veća od veličine fonta.

Prema zadanim postavkama, slobodni prostor će biti ravnomjerno raspoređen iznad i ispod teksta. I linija će biti centrirana okomito. Često je visina linije jednaka visini elementa.

HTML:

CSS:

#dijete (visina linije: 200px;)

Ova metoda radi u svim pretraživačima, iako se može koristiti samo za jednu liniju. Vrijednost od 200 px u primjeru je odabrana proizvoljno. Možete koristiti bilo koju vrijednost veću od veličine fonta teksta.

Centriranje slike visinom linije

Šta ako je sadržaj slika? Hoće li gornja metoda funkcionirati? Odgovor leži u drugom redu CSS koda.

HTML:

CSS:

#parent (line-height: 200px; ) #parent img (vertical-align: middle;)

Vrijednost svojstva line-height mora biti veća od visine slike.

Metoda CSS tabele

Kao što je gore spomenuto, svojstvo vertikalnog poravnanja primjenjuje se na ćelije tablice, gdje odlično funkcionira. Možemo prikazati naš element kao ćeliju tabele i koristiti svojstvo vertical-align na njemu da centriramo sadržaj okomito.

Bilješka: CSS tabela nije isto što i HTML tabela.

HTML:

CSS:

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

Postavljamo izlaz tabele na roditeljski div i prikazujemo ugniježđeni div kao ćeliju tabele. Sada možete koristiti svojstvo vertical-align na unutrašnjem kontejneru. Sve u njemu će biti centrirano okomito.

Za razliku od gornje metode, u ovom slučaju sadržaj može biti dinamičan, jer će div element promijeniti veličinu kako bi odgovarao svom sadržaju.

Nedostatak ove metode je što ne radi u starijim verzijama IE-a. Morate koristiti svojstvo display: inline-block za ugniježđeni kontejner.

Apsolutno pozicioniranje i negativne margine

Ova metoda također radi u svim pretraživačima. Ali to zahtijeva da se centralnom elementu da visina.

Primjer koda istovremeno vrši horizontalno i vertikalno centriranje:

HTML:

CSS:

#roditelj (pozicija: relativna;) #dijete (pozicija: apsolutna; vrh: 50%; lijevo: 50%; visina: 30%; širina: 50%; margina: -15% 0 0 -25%; )

Prvo postavljamo tip pozicioniranja elemenata. Zatim, na ugniježđenom div, postavite gornje i lijeve osobine na 50%, što je centar roditeljskog elementa. Ali gornji lijevi ugao ugniježđenog elementa se centrira. Stoga ga trebate podići (pola visine) i pomaknuti ulijevo (pola širine), a tada će se središte poklopiti sa središtem roditeljskog elementa. Stoga je u ovom slučaju potrebno znati visinu elementa. Zatim elementu dajemo negativne gornje i lijeve margine jednake polovini visine i širine, respektivno.

Ova metoda ne radi u svim pretraživačima.

Apsolutno pozicioniranje i istezanje

Primjer koda izvodi vertikalno i horizontalno centriranje.

HTML:

CSS:

#roditelj (pozicija: relativna;) #dijete (pozicija: apsolutna; gore: 0; dolje: 0; lijevo: 0; desno: 0; širina: 50%; visina: 30%; margina: auto; )

Ideja iza ove metode je da se ugniježđeni element rastegne na sve 4 granice roditeljskog elementa postavljanjem gornjih, donjih, desnih i lijevih svojstava na 0.

Postavljanje margina sa svih strana na auto će postaviti vrijednosti na sve 4 strane da budu jednake, a naš ugniježđeni div element će dovesti u središte roditeljskog elementa.

Nažalost, ova metoda ne radi u IE7 i starijim verzijama.

Jednako podmetanje na vrhu i na dnu

Ova metoda eksplicitno postavlja jednak padding iznad i ispod nadređenog elementa.

HTML:

CSS:

#roditelj (dodaci: 5% 0; ) #dijete (dodaci: 10% 0; )

U CSS kodu za primjer, gornji i donji padding je postavljen za oba elementa. Za ugniježđeni element, postavljanje dopuna će poslužiti za vertikalno centriranje. A padding roditeljskog elementa će centrirati ugniježđeni element u njemu.

Relativne jedinice se koriste za dinamičku promjenu veličine elemenata. A za apsolutne mjerne jedinice, morat ćete izvršiti proračune.

Na primjer, ako je roditeljski element visok 400px, a ugniježđeni element visok 100px, tada je potrebno 150px dopuna na vrhu i dnu.

150 + 150 + 100 = 400

Korišćenje % omogućava da se proračuni prepuste pretraživaču.

Ova metoda djeluje svuda. Loša strana je potreba za proračunima.

Bilješka: Ova metoda radi tako što postavlja marginu elementa. Također možete koristiti margine unutar elementa. Odluku o primjeni margina ili paddinga treba donijeti ovisno o specifičnostima projekta.

plutajući div

Ova metoda koristi prazan element div, koji lebdi i pomaže u kontroli pozicije našeg ugniježđenog elementa u dokumentu. Imajte na umu da je plutajući div postavljen ispred našeg ugniježđenog elementa u HTML kodu.

HTML:

CSS:

#parent (visina: 250px;) #floater (float: lijevo; visina: 50%; širina: 100%; margin-bottom: -50px; ) #child (jasno: oba; visina: 100px; )

Prazni div pomičemo lijevo ili desno i dajemo mu visinu od 50% nadređenog elementa. Na ovaj način će ispuniti gornju polovinu roditeljskog elementa.

Pošto je ovaj div plutajući, uklonjen je iz normalnog toka dokumenta i moramo odmotati ugniježđeni element. U primjeru se koristi clear: oboje, ali dovoljno je koristiti isti smjer kao pomak plutajućeg praznog div.

Gornja granica ugniježđenog elementa div je direktno ispod donje ivice praznog elementa div. Moramo pomaknuti ugniježđeni element gore za polovinu visine plutajućeg praznog elementa. Da bi se riješio problem, koristi se negativna vrijednost svojstva margin-bottom za plutajući prazan div element.

Ova metoda također radi u svim pretraživačima. Međutim, njegovo korištenje zahtijeva dodatni prazan element div i poznavanje visine ugniježđenog elementa.

Zaključak

Sve opisane metode su jednostavne za korištenje. Poteškoća leži u činjenici da nijedan od njih nije prikladan za sve slučajeve. Potrebno je analizirati projekat i odabrati onaj koji najbolje odgovara zahtjevima.

Svi koji su uključeni u layout prije ili kasnije se suoče s potrebom da se elementi poravnaju okomito... i znaju kakve poteškoće mogu nastati kada se element poravna sa središtem. CSS ima svojstvo `vertical-align` sa višestrukim vrijednostima koje bi logično trebale izvršiti vertikalno poravnanje. Međutim, u praksi to ne funkcionira kako se očekivalo.

Postoji nekoliko tehnika za rješavanje ovog problema. Pogledajmo pobliže svaki od njih u nastavku.

1. Poravnanje sa tabelom

U ovom slučaju, zamjenjujemo vanjski blok sa jednoćelijskom tablicom. Poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutrašnji blok.

HTML

css

Vanjski (širina: 200px; visina: 200px; poravnanje teksta: centar; vertikalno poravnanje: sredina; boja pozadine: #ffc;)

Glavni nedostatak ovog rješenja, sa stanovišta semantike, je što se tabela ne koristi za namjeravanu svrhu. Drugi nedostatak je što da biste kreirali tabelu, morate dodati još jedan element oko vanjskog bloka.

Prvi negativ se može djelomično poništiti zamjenom oznaka tablice sa div i postavljanjem načina prikaza tablice u CSS-u.

HTML

css

Vanjski omotač ( display : table ; ) .outer ( display : table-cell ; )

2. Poravnanje sa paddingom

Pod uslovom da znamo visine unutrašnjeg i spoljašnjeg bloka, poravnanje se može postaviti pomoću vertikalnih uvlaka unutrašnjeg bloka, koristeći formulu: (H spoljašnji - H unutrašnji) / 2.

css

Vanjski (visina: 200px;) .unutarnji (visina: 100px; margina: 50px 0 ;)

Loša strana rješenja je obavezno poznavanje visine oba bloka.

3. Poravnanje s visinom linije

Ako unutrašnji blok ne zauzima više od jednog reda teksta, tada možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Pošto sadržaj unutrašnjeg bloka ne bi trebao ići u drugi red, dobro je dodati i white-space: nowrap i overflow: skrivena pravila.

css

Vanjski (visina: 200px; visina-line: 200px;) .unutarnji (razmak: nowrap; prelijevanje: skriveno;)

Ova metoda se također može koristiti za poravnavanje višelinijskog teksta. Da bi to uradio, unutrašnji blok treba da nadjača vrednost visine linije, kao i da doda pravila display: inline-block i vertical-align: middle .

css

Vanjski (visina: 200px; visina-line: 200px;) .unutarnji (visina-line: normalan; display: inline-block; vertikalno-poravnanje: sredina;)

Nedostatak ove metode je što visina vanjskog bloka mora biti poznata.

4. Poravnanje sa “stretch”

Ova metoda se može koristiti kada nam je poznata visina unutrašnjeg bloka, ali nije poznata.

Za primjenu ove metode potrebno nam je:

• Postavite vanjski blok na položaj: relativan, a unutrašnji blok na apsolutni položaj: apsolutni;
• Dodajte neka pravila gornje: 0 i donje: 0 unutrašnjem bloku, zbog čega će se protegnuti na cijelu visinu vanjskog bloka;
• Postavite vertikalni padding unutrašnjeg bloka na auto .

css

Vanjski (pozicija: relativna;) .unutrašnja (visina: 100px; pozicija: apsolutna; vrh: 0; dno: 0; margina: auto 0 ;)

5. Poravnanje sa negativnim marginama-vrh

Slično prethodnoj, ova metoda se koristi kada je visina vanjskog bloka nepoznata, ali je poznata visina unutrašnjeg.

Morate postaviti vanjski blok na relativno pozicioniranje, a unutrašnji blok na apsolutno pozicioniranje. Zatim pomaknite unutrašnju kutiju do polovice visine gornje strane vanjske kutije: 50% i pomaknite je do pola njene visine margin-top: -H _unutrašnji / 2 .

css

Vanjski ( pozicija : relativna ; ) .unutrašnja ( visina : 100px ; pozicija : apsolutna ; vrh : 50% ; margin-top : -50px ;)

Nedostatak ove metode je što visina unutrašnje jedinice mora biti poznata.

6. Poravnanje sa transformacijom

Metoda se može koristiti kada je visina unutrašnje jedinice nepoznata. Potrebno je da pomerite unutrašnju kutiju na dole do polovine visine gornje strane spoljne kutije: 50% , zatim upotrebite svojstvo transformacije i podignite ga nazad pomoću funkcije translateY(-50%).

css

Vanjski ( pozicija : relativna ; ) .unutrašnja ( pozicija : apsolutna ; vrh : 50% ; transformacija : translateY (-50% ); )

7. Poravnanje sa pseudo-elementom

Ovo je najsvestranija metoda koja se može koristiti kada su visine oba bloka nepoznate.

Suština metode je da se unutar vanjskog bloka doda inline blok sa visinom od 100% i postavi ga na vertikalno poravnanje. Tako će visina dodanog bloka biti jednaka visini vanjskog bloka. Unutrašnji blok će se poravnati okomito u odnosu na dodati, a time i vanjski blok.

Kako se ne bi narušila semantika, poželjno je dodati inline blok koristeći pseudoelemente prije ili poslije.

css

Vanjski :prije (prikaz: inline-blok; visina: 100%; okomito poravnanje: sredina; sadržaj: "" ; ) .unutrašnji (prikaz: inline-blok; okomito poravnanje: sredina ; )

Nedostatak ove metode je što se ne može koristiti sa apsolutnom pozicioniranjem unutrašnje jedinice.

8. Poravnanje sa Flexboxom

Najmoderniji način vertikalnog poravnanja je korištenje fleksibilnog rasporeda kutije (ili skraćeno Flexbox). Omogućava vam fleksibilnu kontrolu pozicioniranja elemenata na stranici, postavljajući ih gotovo bilo gdje. Centralno poravnanje za Flexbox je vrlo jednostavan zadatak.