Horizontalno i vertikalno poravnanje elemenata. Okomito poravnanje u div

Često prilikom pisanja teksta postoji potreba za okomitim poravnanjem teksta u bloku. Ako je to potrebno učiniti u ćeliji tablice, tada se postavlja vrijednost svojstva CSS okomitog poravnanja.

Ali postavlja se razumno pitanje, je li moguće bez tablice, bez preopterećenja oznake stranice nepotrebnim oznakama? Odgovor je "možete", ali zbog slabe podrške CSS-a od strane MSIE preglednika, rješenje problema za njega će se razlikovati od rješenja za druge uobičajene preglednike.

Razmotrite sljedeći isječak kao primjer:

i pokušajte okomito poravnati tekst prema sredini bloka i donjem rubu bloka.

Rješenje problema

"Ispravni" preglednici (uključujući MSIE

Većina modernih preglednika podržava CSS2.1, odnosno vrijednost ćelije tablice za svojstvo prikaza. To nam daje mogućnost da se blok s tekstom pojavi kao ćelija tablice i, koristeći ovu prednost, poravnamo tekst okomito:

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

div (
prikaz: tablica-ćelija;
vertikalno poravnati: dno;
}

Internet Explorer (uključivo do 7. verzije)

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

div (
položaj: relativan;
}
raspon div (
zaslon: blok;
pozicija: apsolutna;
dno: 0%;
lijevo: 0%;
širina: 100%;
}

Ovaj skup pravila također funkcionira u "pravim" preglednicima.

Navedite svojstva

Raspon podjela (
zaslon: blok;
širina: 100%;
}

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

Za okomito poravnavanje teksta u sredini bloka, izvorni fragment će i dalje morati biti kompliciran - uvest ćemo 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/)
• Okomito poravnavanje (www.cssplay.co.uk/ie/valign.html)
• okomito poravnanje: sredina (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Drugi način za okomito poravnavanje u CSS-u (cssing.org.ua/2007/04/26/another-css-valign-method)

Vrlo često u rasporedu je potrebno centrirati neki element vodoravno i/ili okomito. Stoga sam odlučio napraviti članak s raznim metodama centriranja, kako bi sve bilo pri ruci na jednom mjestu.

Horizontalno poravnanje

margina: auto

Horizontalno poravnanje s marginom koristi se kada je poznata širina središnjeg elementa. Radi za blok elemente:

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

Određivanje automatske vrijednosti za desni i lijevi padding čini ih jednakima, što centrira element vodoravno unutar roditeljskog bloka.

poravnavanje teksta: središte

Ova je metoda prikladna za poravnavanje teksta po sredini unutar bloka. poravnavanje teksta: središte:

pozicija i negativna margina lijevo

Prikladno za centrirane blokove poznate širine. Roditeljskom bloku dajemo položaj: u odnosu na položaj u odnosu na njega, središnji element je položaj: apsolutni, lijevo: 50% i negativna margina lijevo, koja je jednaka polovici širine elementa:

prikaz: inline-block + text-align: centar

Ova metoda je prikladna za poravnavanje blokova nepoznate širine, ali zahtijeva roditeljski omot. Na primjer, na ovaj način možete centrirati horizontalni izbornik:

• Dom
• o autoru

Vertikalno poravnanje

linija-visina

Da biste poravnali jedan redak teksta, možete koristiti istu visinu i razmak između redaka za roditeljski blok. Pogodno za gumbe, stavke izbornika i još mnogo toga.

pozicija i negativna marža gore

Element se može okomito poravnati dajući mu fiksnu visinu i položaj primjene: apsolutna i negativna margina prema gore jednaka polovici visine elementa koji se poravnava. Roditeljskom bloku mora biti dodijeljen položaj: relativan:

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

Dakle, pomoću pozicioniranja i negativnih margina, možete centrirati element na stranici.

prikaz: tablica-ćelija

Za okomito poravnanje, svojstvo display: table-cell primjenjuje se na element, što ga čini da oponaša ćeliju tablice. Također postavljamo visinu i vertikalno poravnanje: sredinu na nju. Sve ćemo to zamotati u kontejner sa svojstvom dislpay: table; :

Dinamičko poravnavanje elementa na stranici

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

Uključimo 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čunajmo i objesimo koordinate središta stranice na CSS lijevo i gornja svojstva:

Funkcija alignCenter (elem) (elem.css ((lijevo: ($ (prozor) .width () - elem.width ()) / 2 + "px", gore: ($ (prozor) .height () - elem. visina ()) / 2 + "px" // ne zaboravite dodati poziciju: apsolutno elementu da pokrene koordinate)))

U prvom retku funkcije dobivamo širinu dokumenta i oduzimamo od nje širinu elementa, podijeljenu na pola - to će biti središte stranice vodoravno. Drugi red radi istu stvar, samo s visinom, za okomito poravnanje.

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

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

Korištenje Flexboxa

Nove značajke CSS3, poput Flexboxa, polako postaju uobičajene. Tehnologija pomaže u stvaranju izgleda bez korištenja plutajućih, pozicioniranja itd. Također se može koristiti za centriranje elemenata. Na primjer, upotrijebimo flexbox na roditeljskom .wrapperu i centriramo sadržaj unutar:

Omot (zaslon: -webkit-box; zaslon: -moz-box; zaslon: -ms-flexbox; zaslon: -webkit-flex; zaslon: flex; visina: 500px; širina: 500px;) .wrapper .content (margina: auto; / * margina: 0 auto; samo vodoravno * / / * margina: auto 0; samo okomito * /)

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

Povezani resursi

Pomozite projektu

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

Počnimo s općim opisom problema.

Problem okomitog centriranja

Horizontalno centriranje vrlo je jednostavno i lako. Kada je centrirani element umetnut, koristite svojstvo parent-align. Kada je element baziran na bloku, postavljamo njegovu širinu i automatski postavljamo lijevu i desnu marginu.

Većina ljudi, kada koristi svojstvo text-align:, poziva se na svojstvo vertical-align da centrira okomito. Sve izgleda dovoljno logično. Ako ste koristili tablične predloške, vjerojatno ste uvelike 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 vrlo je slično tome. Također utječe na ćelije tablice i neke inline elemente.

Vrijednost svojstva vertical-align djeluje u odnosu na roditeljski inline element.

• U retku teksta poravnanje se vrši u odnosu na visinu reda.
• Poravnanje se koristi u ćeliji tablice u odnosu na vrijednost izračunatu posebnim algoritmom (obično se dobiva visina reda).

Nažalost, svojstvo vertical-align nema utjecaja na elemente na razini bloka (na primjer, odlomke unutar elementa div). Ova situacija može dovesti do ideje da ne postoji rješenje za problem vertikalnog poravnanja.

Ali postoje i druge metode za centriranje blok elemenata, čiji izbor ovisi o tome što je centrirano u odnosu na vanjski spremnik.

Metoda visine linije

Ova metoda radi kada želite okomito centrirati jedan redak teksta. Sve što trebate učiniti je postaviti visinu reda da bude veća od veličine fonta.

Prema zadanim postavkama, slobodni prostor će biti ravnomjerno raspoređen na vrhu i na dnu 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 preglednicima, iako se može koristiti samo za jedan redak. Vrijednost od 200 px u primjeru je odabrana proizvoljno. Može se koristiti bilo koja vrijednost veća od veličine fonta teksta.

Centriranje slike pomoću visine linije

Što ako je sadržaj slika? Hoće li gornja metoda djelovati? Odgovor leži u još jednoj liniji CSS-a.

HTML:

CSS:

#parent (visina linije: 200px;) #parent img (vertical-align: middle;)

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

Metoda CSS tablica

Gore je spomenuto da se svojstvo vertikalnog poravnanja odnosi na ćelije tablice, gdje odlično funkcionira. Naš element možemo prikazati kao ćeliju tablice i koristiti svojstvo vertical-align za okomito centriranje sadržaja.

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

HTML:

CSS:

#roditelj (prikaz: stol;) #dijete (prikaz: ćelija-tablica; okomito poravnanje: sredina;)

Postavljamo tablični izlaz za roditeljski div, a ugniježđeni div izlazi kao ćelija tablice. Sada možete koristiti svojstvo vertical-align na unutarnjem spremniku. Sve u njemu bit će okomito centrirano.

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

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

Apsolutno pozicioniranje i negativne margine

Ova metoda također radi u svim preglednicima. Ali zahtijeva da se središnjem elementu zada visina.

Primjer koda istovremeno izvodi horizontalno i okomito centriranje:

HTML:

CSS:

#roditelj (položaj: relativan;) #dijete (položaj: apsolutni; vrh: 50%; lijevo: 50%; visina: 30%; širina: 50%; margina: -15% 0 0 -25%;)

Prvo postavljamo vrstu pozicioniranja elemenata. Zatim, za ugniježđeni div, postavite gornja i lijeva svojstva na 50%, što je središte nadređenog. Ali gornji lijevi kut ugniježđenog elementa je centriran. Stoga ga trebate podići (pola visine) i pomaknuti ulijevo (pola širine), a onda će se središte poklopiti sa središtem roditeljskog elementa. Stoga je u ovom slučaju potrebno poznavanje visine elementa. Zatim postavite element na negativnu gornju i lijevu marginu jednaku polovici visine i širine.

Ova metoda ne radi u svim preglednicima.

Apsolutno pozicioniranje i istezanje

Primjer koda izvodi vertikalno i horizontalno centriranje.

HTML:

CSS:

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

Ideja iza ove metode je rastezanje ugniježđenog elementa na sva 4 ruba roditeljskog elementa postavljanjem gornjih, donjih, desnih i lijevih svojstava na 0.

Postavljanjem na margine automatskog oblikovanja na svim stranama postavit će se jednake vrijednosti na sve 4 strane i naš ugniježđeni div element će biti centriran na roditeljskom elementu.

Nažalost, ova metoda ne radi u IE7 i niže.

Jednake gornje i donje margine

Ova metoda eksplicitno postavlja jednake margine iznad i ispod nadređenog elementa.

HTML:

CSS:

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

Primjer CSS koda postavlja gornju i donju marginu za oba elementa. Za ugniježđeni element, postavljanje dopuna poslužit će za okomito centriranje. A padding roditeljskog elementa će centrirati ugniježđeni element u njemu.

Relativne jedinice se koriste za dinamičku promjenu veličine stavki. A za apsolutne jedinice morat će se izvršiti izračuni.

Na primjer, ako je roditeljski element visok 400px, a ugniježđeni element 100px, tada su potrebne gornje i donje margine od 150px.

150 + 150 + 100 = 400

Korištenje % omogućuje da se izračuni prepuste pregledniku.

Ova metoda djeluje posvuda. Nedostatak je potreba za izračunima.

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

Plutajući div

Ova metoda koristi prazan element div koji pluta i pomaže kontrolirati položaj našeg ugniježđenog elementa u dokumentu. Imajte na umu da je plutajući div pozicioniran 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 (čisto: oboje; visina: 100px;)

Prazni div pomaknemo lijevo ili desno i postavimo njegovu visinu na 50% roditeljskog elementa. Na taj način će ispuniti gornju polovicu roditelja.

Budući da je ovaj div plutajući, uklonjen je iz normalnog tijeka dokumenta i moramo otkazati prelamanje teksta za ugniježđeni element. Primjer koristi clear: oboje, ali je dovoljno koristiti isti smjer kao pomak plutajućeg praznog elementa div.

Gornja granica ugniježđenog elementa div je izravno ispod donje granice praznog elementa div. Moramo pomaknuti ugniježđeni element gore za polovicu visine plutajućeg praznog elementa. Da biste riješili problem, upotrijebite negativnu vrijednost za svojstvo margin-bottom za plutajući prazan element div.

Ova metoda također radi u svim preglednicima. Međutim, njegova upotreba zahtijeva dodatni prazan element div i poznavanje visine ugniježđenog elementa.

Zaključak

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

Svatko tko se bavi rasporedom, prije ili kasnije, suoči se s potrebom vertikalnog poravnanja elemenata ... i zna kakve poteškoće mogu nastati pri poravnavanju elementa u sredini. CSS ima svojstvo `vertical-align` s višestrukim vrijednostima koje bi, logično, trebale izvršiti vertikalno poravnanje. U praksi, međutim, uopće ne funkcionira kako se očekivalo.

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

1. Poravnanje pomoću tablice

U ovom slučaju zamjenjujemo vanjski blok tablicom s jednom stanicom. Poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutarnji blok.

HTML

CSS

Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnanje: sredina; boja pozadine: #ffc;)

Glavni nedostatak ovog rješenja, sa stajališta semantike, je korištenje tablice ne za namjeravanu svrhu. Drugi nedostatak je da za stvaranje tablice morate dodati još jedan element oko vanjskog bloka.

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

HTML

CSS

Vanjski omotač (zaslon: stol;) .vanjski (zaslon: ćelija tablice;)

2. Poravnanje s uvlakama

Pod pretpostavkom da znamo visine unutarnjeg i vanjskog okvira, poravnanje se može postaviti pomoću vertikalnog odsječka unutarnjeg okvira pomoću formule: (H vanjski - H unutarnji) / 2.

CSS

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

Nedostatak rješenja je obvezno poznavanje visine oba bloka.

3. Poravnanje s visinom linije

Ako unutarnji blok ne zauzima više od jednog retka teksta, tada možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da sadržaj unutarnjeg bloka ne bi trebao ići u drugi redak, preporučljivo je dodati i white-space: nowrap i overflow: skrivena pravila.

CSS

Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (razmak: nowrap; preljev: skriven;)

Ova metoda se također može koristiti za poravnavanje teksta u više redaka. Da biste to učinili, unutarnji blok treba nadjačati vrijednost visine reda i dodati pravila display: inline-block i vertical-align: srednja.

CSS

Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (visina linije: normalna; zaslon: inline-block; okomito poravnanje: sredina;)

Nedostatak ove metode je što se mora znati visina vanjskog bloka.

4. Poravnavanje pomoću "stretch"

Ova metoda se može koristiti kada nam je poznata visina unutarnje jedinice, ali vanjska nije.

Za primjenu ove metode potrebno nam je:

• Postavite vanjski blok na relativni položaj položaja: relativan, a na unutarnji - apsolutni položaj: apsolutni;
• Dodajte nekoliko pravila gore: 0 i dolje: 0 unutarnjem bloku, zbog čega će se rastegnuti na cijelu visinu vanjskog bloka;
• Postavite vertikalni padding unutarnjeg bloka na automatski.

CSS

Vanjski (položaj: relativni;) .unutarnji (visina: 100px; položaj: apsolutni; vrh: 0; dno: 0; margina: automatski 0;)

5. Poravnanje s negativnim vrhom margine

Slično prethodnoj, ova metoda se primjenjuje kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg.

Morate postaviti relativni položaj vanjskog bloka, a unutarnjeg - apsolutno. Zatim pomaknite unutarnji blok dolje za polovicu visine gornjeg dijela vanjskog bloka: 50% i podignite ga za polovicu njegove vlastite visine margin-top: -H _unutarnje / 2 .

CSS

Vanjski (položaj: relativan;) .unutarnji (visina: 100px; položaj: apsolutni; vrh: 50%; margin-top: -50px;)

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

6. Usklađivanje s transformacijom

Metoda se može primijeniti kada je visina unutarnje jedinice nepoznata. Morate pomaknuti unutarnji blok dolje za polovicu visine vrha vanjskog bloka: 50%, zatim upotrijebite svojstvo transformacije i pomaknite ga natrag prema gore pomoću funkcije translateY (-50%).

CSS

Vanjski (položaj: relativan;) .unutarnji (položaj: apsolutni; vrh: 50%; transformacija: translateY (-50%);)

7. Usklađivanje s pseudo-elementom

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

Bit metode je dodati inline-blok s visinom od 100% unutar vanjskog bloka i postaviti ga na okomito poravnanje. Dakle, visina dodanog bloka bit će jednaka visini vanjskog bloka. Unutarnja jedinica bit će okomito poravnata s dodanom, a time i vanjskom jedinicom.

Kako se ne bi narušila semantika, preporučljivo je dodati inline blok koristeći pseudoelemente prije ili poslije.

CSS

Vanjski: prije (zaslon: inline-block; visina: 100%; vertikalno poravnanje: sredina; sadržaj: "";) .unutarnji (prikaz: inline-block; okomito poravnanje: sredina;)

Nedostatak ove metode je što je nemoguće prihvatiti s apsolutnim pozicioniranjem unutarnje jedinice.

8. Poravnajte s Flexboxom

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