Css horizontalno poravnanje blokova. Centriranje bloka pomoću CSS-a

#dijete (visina linije: 200px;)

Ova metoda radi u svim preglednicima, ali ne zaboravite da je treba koristiti za redak teksta. Ako se vaš tekst proteže na više od jednog reda, upotrijebite drugu metodu. Vrijednost svojstva visine reda može biti bilo koja, ali ne manja od visine fonta. U praksi je ova metoda izvrsna za centriranje vodoravnog izbornika.

CSS metoda pomoću svojstava tablice

Kao što sam već napisao, sadržaj ćelije može se centrirati pomoću CSS svojstva vertikalnog poravnanja. Nadređeni element mora biti predstavljen kao tablica, podređeni element mora biti označen kao ćelija, a svojstvo okomitog poravnanja sa vrijednošću u sredini primijenjeno na njega. Na ovaj način, svaki sadržaj u podređenom elementu bit će okomito centriran. CSS kod je ispod.

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

Nažalost, ova metoda ne radi u starijim verzijama IE-a. Ako trebate podršku za IE6 i niže, dodajte deklaraciju display: inline-block u podređeni element.

#dijete (prikaz: inline-block;)

Apsolutno pozicioniranje i negativna margina

Ova metoda je za elemente na razini bloka i radi u svim preglednicima. Morate postaviti visinu elementa koji će biti centriran.

Ispod je kod gdje je podređeni element centriran pomoću dane metode.

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

Prvi korak je pozicioniranje nadređenih i podređenih elemenata. Zatim postavljamo pomak podređenog elementa na 50% u odnosu na vrh (vrh) i lijevu stranu (lijevo) roditeljskog elementa, tako da centriramo podređeni element u odnosu na roditelj. Međutim, naše manipulacije će gornji desni kut podređenog elementa staviti u središte nadređenog elementa, što nam, naravno, ne odgovara.

Naš zadatak je pomicati podređeni element gore i lijevo, u odnosu na roditeljski element, tako da podređeni element bude vizualno centriran okomito i vodoravno. Zbog toga moramo znati visinu i širinu podređenog elementa.

Dakle, podređenom elementu trebamo dati negativnu gornju i lijevu marginu jednaku polovici širine i visine podređenog elementa.

Za razliku od prve dvije metode, ova metoda je za elemente na razini bloka. Metoda radi u svim preglednicima, međutim, sadržaj može premašiti visinu nadređenog elementa i nadilaziti ga. Ova metoda najbolje funkcionira kada su visina i širina elemenata fiksne.

Apsolutno pozicioniranje podređenog elementa

Kao iu prethodnoj metodi, roditeljski i podređeni elementi su pozicionirani relativno, odnosno apsolutno.

U CSS kodu centriram podređeni element i okomito i vodoravno, no možete koristiti samo okomito centriranje.

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

Ideja ove metode je da možemo pozicionirati podređeni element koristeći gornje, lijevo, desno, donje vrijednosti svojstva jednake 0. Budući da je naš podređeni element manji od roditeljskog elementa, neće moći " stick” na roditeljski element.

Vrijednosti margina za sve četiri strane podređenog elementa su nula, što element čini okomito centriranim u odnosu na roditelj. Nažalost, ova metoda ima iste nedostatke kao i prethodna metoda: potrebno je popraviti visinu i širinu djeteta, nedostatak podrške za starije IE preglednike.

Donja i gornja margina su jednake

U ovoj metodi roditeljskom elementu izričito dodjeljujemo jednak padding (donji i gornji), zahvaljujući kojem je podređeni element vizualno centriran okomito.

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

Koristim relativne veličine. Ako su veličine blokova fiksne, bit će potrebni neki matematički izračuni.

Na primjer, ako je roditeljski element visok 400px, a podređeni element 100px, tada biste trebali postaviti gornji i donji padding na 150px.

150 + 150 + 100 = 400

plutajući div

Ova metoda koristi prazan float okvir koji kontrolira vertikalni položaj podređenog elementa. Plutajući div treba postaviti prije podređenog elementa, pogledajte HTML kod u nastavku.

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

Najprije pomaknemo plutajući okvir ulijevo (ili udesno) i damo mu visinu od 50% nadređenog elementa. Na taj će način plutajući blok ispuniti gornju polovicu roditeljskog elementa.

Budući da je blok plutajući, uklanja se iz općeg tijeka dokumenta, stoga podređenom bloku treba dodijeliti svojstvo clear s vrijednošću oba . Postavio sam vrijednost na obje , međutim možete koristiti bilo koju vrijednost koja je ista kao i smjer pozicioniranja plutajućeg elementa.

Sada je gornji rub podređenog elementa izravno ispod donjeg ruba plutajućeg elementa. Moramo podići podređeni element za polovicu visine plutajućeg elementa. Da biste to učinili, dovoljno je postaviti negativnu donju marginu jednaku 50% za plutajući blok.

Radi u svim preglednicima. Nedostatak ove metode je što zahtijeva prazan blok i treba znati visinu podređenog elementa.

Mislim da su se mnogi od vas koji ste radili na rasporedu susreli s potrebom da se elementi poravnaju okomito i znaju koje poteškoće nastaju pri poravnavanju elementa prema sredini.

Da, za okomito poravnanje u CSS-u postoji posebno svojstvo vertical-align s mnogo vrijednosti. Međutim, u praksi to ne funkcionira kako se očekivalo. Pokušajmo ovo shvatiti.

Usporedimo sljedeće pristupe. Usklađenost sa:

• stolovi,
• udubljenje,
• visina linije,
• istezanje,
• negativna marža,
• transformirati,
• pseudo element
• flexbox.

Kao ilustraciju, razmotrite sljedeći primjer.

Postoje dva elementa div, od kojih je jedan ugniježđen u drugi. Dajmo im odgovarajuće klase - vanjski i unutarnji.

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

Za početak, razmotrite slučaj kada su veličine vanjskog i unutarnjeg bloka znan. Unutarnjem elementu dodajmo display: inline-block, a vanjskom elementu text-align: center i vertical-align: middle.

Zapamtite da se poravnanje odnosi samo na elemente koji imaju inline ili inline-blok način prikaza.

Postavimo veličine blokova, kao i boje pozadine da vidimo njihove granice.

Vanjski ( širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnanje: sredina; boja pozadine: #ffc; ) .unutarnji (prikaz: inline-blok; š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?Činjenica je da 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 učinila ništa. Štoviše, primjena ovog svojstva na unutarnji element također neće učiniti ništa, budući da su inline-blokovi okomito poravnati sa susjednim blokovima, a u našem slučaju imamo jedan inline-blok.

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

Poravnanje sa stolom

Prvo rješenje koje vam pada na pamet je zamijeniti vanjski blok stolicom s jednom stanicom. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, tj. na unutarnji blok.

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

Očigledan nedostatak ovog rješenja je što je sa stajališta semantike pogrešno koristiti tablice za poravnanje. Drugi nedostatak je da za izradu tablice morate dodati još jedan element oko vanjskog bloka.

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

.vanjski omotač (prikaz: tablica; ) .vanjski (prikaz:ćelija tablice;)
Ipak, vanjski blok će i dalje ostati stol sa svim posljedicama koje iz toga proizlaze.

Poravnanje s paddingom

Ako su poznate visine unutarnjeg i vanjskog bloka, tada se poravnanje može postaviti pomoću okomitog podstavka unutarnjeg bloka, koristeći formulu: (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 oba bloka.

Poravnanje s visinom 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 smije premotati u drugi redak, preporuča se dodati i white-space: nowrap i overflow: skrivena pravila.

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

Ova tehnika se također može koristiti za poravnavanje teksta s više redaka ako nadjačate vrijednost visine retka za unutarnji blok i dodate pravila display: inline-block i vertical-align: middle .

Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (visina linije: normalna; zaslon: inline-block; okomito poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/

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

Stretch Alignment

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

Za ovo vam je potrebno:

1. postaviti relativno pozicioniranje na vanjski blok, a apsolutno pozicioniranje na unutarnji blok;
2. dodajte pravila gornji: 0 i donji: 0 unutarnjem bloku, zbog čega će se protegnuti na cijelu visinu vanjskog bloka;
3. postavite vrijednost na auto za okomiti padding unutarnjeg bloka.

.vanjski (pozicija: relativna; ) .unutarnja (visina: 100px; pozicija: apsolutna; vrh: 0; dno: 0; margina: automatski 0; )
http://jsfiddle.net/c1bgfffq/4/

Bit ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje pregledniku da izračuna okomiti padding u jednakom omjeru ako je njihova vrijednost postavljena na auto.

Poravnanje s negativnim vrhom margine

Ova metoda je postala nadaleko poznata i vrlo se često koristi. Kao i prethodni, primjenjuje 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 unutarnju kutiju prema dolje do polovice visine gornje strane vanjske kutije: 50% i pomaknuti je do polovice njezine vlastite visine margin-top: -H unutarnja / 2.

Vanjski (pozicija: relativna; ) .unutarnja (visina: 100px; pozicija: apsolutna; vrh: 50%; margin-top: -50px; )
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 primijeniti kada je visina unutarnjeg bloka nepoznata. U ovom slučaju, umjesto postavljanja negativnog dopuna u pikselima, možete koristiti svojstvo transformacije i podići unutarnji okvir 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 su postotne vrijednosti svojstva margine relativne u odnosu na roditeljski element, vrijednost od 50% bila bi jednaka polovici visine vanjskog okvira, a mi bismo morali podići unutarnji okvir za polovicu njegove vlastite visine. To je upravo ono čemu služi svojstvo transformacije.

Nedostatak ove metode je što se ne može primijeniti ako unutarnji blok ima apsolutno pozicioniranje.

Usklađivanje s Flexboxom

Najmoderniji način vertikalnog poravnanja je korištenje fleksibilnog rasporeda okvira (popularno poznatog kao Flexbox). Ovaj modul omogućuje vam fleksibilnu kontrolu pozicioniranja elemenata na stranici, postavljajući ih gotovo bilo gdje. Poravnanje po sredini za Flexbox vrlo je jednostavan zadatak.

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

Vanjski (zaslon: flex; širina: 200px; visina: 200px; ) .unutarnji (širina: 100px; margina: auto; )
http://jsfiddle.net/c1bgfffq/14/

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

Koji način odabrati?

Potrebno je poći od iskaza problema:

• Za okomito poravnanje teksta, bolje je koristiti okomito odsječavanje ili svojstvo visine reda.
• Za apsolutno pozicionirane elemente s poznatom visinom (kao što su ikone) idealan je pristup negativne margine na vrhu.
• Za složenije slučajeve u kojima je visina bloka nepoznata, treba koristiti pseudoelement ili svojstvo transformacije.
• Pa, ako ste dovoljno sretni da ne morate podržavati starije verzije IE-a, onda je, naravno, bolji Flexbox.

Oznake: Dodajte oznake

Prilikom izrade div blokova vjerojatno ste naišli na situacije u kojima morate centrirati svoj div vodoravno i okomito koristeći čisti CSS. Na primjer, kada stvarate skočne prozore s . Postoji nekoliko načina za implementaciju centriranja, a u ovom ću članku pokriti svoje omiljene i najjednostavnije načine, koristeći CSS ili jQuery.

Za početak, osnove:

Horizontalno centriranje u CSS-u

Ovo je jednostavno za napraviti, mi koristimo margina za naše razd blok.

ClassName( margin:0 auto; širina:200px; visina:200px; )

Da biste centrirali div blok samo vodoravno, trebate definirati širinu bloka (širinu), upotrijebite svojstvo auto za uvlake (margina) lijevo i desno. Ova metoda će raditi za sve elemente bloka (div, p, h1, itd...). Da biste primijenili horizontalno centriranje za inline elemente (linkove, slike...), trebate primijeniti opciju prikaz:blok;

Horizontalno i okomito centriranje u CSS-u

Centriranje div bloka vodoravno i okomito u isto vrijeme je malo teže. Morate unaprijed znati dimenzije div bloka.

ClassName( širina:300px; visina:200px; pozicija:apsolutna; lijevo:50%; vrh:50%; margina:-100px 0 0 -150px; )

Preko apsolutna pozicioniranje bloka, možemo ga odvojiti od okolnih elemenata i odrediti njegov položaj u odnosu na veličinu prozora preglednika. Premjestite div blok na 50% lijevo i na vrhu prozora. Sada je gornji lijevi kut bloka u sredini prozora preglednika. Ostaje postaviti div blok u središte stranice tako da ga pomaknete na pola svoje širine lijevo i pola svoje visine gore. Ura! Pokazalo se izvrsno centriranje blokova na čistom css kodu.

Horizontalno i okomito centriranje pomoću jQueryja

Kao što je već spomenuto, CSS metoda centriranja radi samo s fiksnim veličinama. Ako dimenzije nisu definirane, u pomoć će priskočiti jQuery metoda:

$(window).resize(function()( $(".className").css(( position:"apsolute", lijevo: ($(window).width() - $(".className").outerWidth( ))/2, gore: ($(prozor).height() - $(".ime klase").outerHeight())/2 )); )); // Za pokretanje funkcije kada se prozor učita: $(window).resize();

Funkcija ove metode je pokretanje funkcije resize() pomoću linije $(prozor).resize(). Ova funkcija radi kad god se promijeni veličina prozora preglednika. Koristimo vanjska širina() I vanjska visina() jer, za razliku od širina() I visina(), uključuju padding i debljinu obruba u veličini koju vraćaju. Zadnji redak započinje proces centriranja diva na učitavanje stranice.

Prednost korištenja ove metode je u tome što ne morate znati koliki je div. Glavni nedostatak je što radi samo kada je JavaScript omogućen. Stoga je ova metoda prihvatljiva za višenamjenska sučelja kao što su Vkontakte, Facebook itd.

Kao i uvijek, možete predložiti svoju omiljenu metodu centriranja blokova pisanjem u komentaru.

Svaki dizajner izgleda stalno se suočava s potrebom da uskladi sadržaj u bloku: vodoravno ili okomito. Postoji nekoliko dobrih članaka na ovu temu, ali svi nude mnogo zanimljivih, ali malo praktičnih opcija, zbog čega morate gubiti dodatno vrijeme da biste istaknuli ono glavno. Odlučio sam ove podatke dostaviti u formi koja mi odgovara, da više ne guglam.

Poravnavanje blokova s ​​poznatim veličinama

Najlakši način za korištenje CSS-a je poravnavanje okvira koji imaju poznatu visinu (za okomito poravnanje) ili širinu (za horizontalno poravnanje).

Poravnanje s paddingom

Ponekad ne možete centrirati element, već mu dodati granice sa svojstvom " padding".

Na primjer, postoji slika 200 x 200 piksela i želimo je centrirati u blok od 240 x 300. Možemo postaviti visinu i širinu vanjskog bloka = 200 px, te dodati 20 piksela na vrhu i na dnu, i 50 lijevo i desno.

.example-wrapper1 (pozadina: #535E73; širina: 200px; visina: 200px; padding: 20px 50px;)

Poravnavanje apsolutno pozicioniranih blokova

Ako je blok postavljen na " pozicija: apsolutna", tada se može pozicionirati u odnosu na najbliži roditelj s "položaj: relativ". Za to, sva svojstva (" vrh","pravo","dno","lijevo") unutarnjeg bloka za dodjelu iste vrijednosti, kao i "margin: auto".

*Postoji nijansa: širina (visina) unutarnjeg bloka + vrijednost lijevog (desno, dolje, gore) ne smije prelaziti veličinu roditeljskog bloka. Sigurnije je postaviti lijeva (desno, dolje, gore) svojstva na 0 (nula).

.example-wrapper2 (pozicija: relativna; visina: 250px; pozadina: url(space.jpg) ;) 0; desno: 0; margina: auto; pozadina: url(king.png) ;)

Horizontalno poravnanje

Poravnanje s "text-align: center"

Za poravnavanje teksta u bloku postoji posebno svojstvo " poravnati tekst". Kada je postavljeno na " centar" svaki redak teksta bit će poravnat vodoravno. Za tekst u više redaka ovo rješenje se rijetko koristi, češće se ova opcija može pronaći za poravnavanje raspona, poveznica ili slika.

Jednom sam morao smisliti tekst da pokažem kako poravnavanje teksta funkcionira s CSS-om, ali ništa zanimljivo mi nije palo na pamet. Isprva sam odlučio negdje kopirati dječju pjesmicu, ali sam se sjetio da bi to moglo pokvariti posebnost članka, a naši dragi čitatelji to neće moći pronaći na Googleu. I onda sam odlučio napisati ovaj odlomak ovdje – na kraju krajeva, poanta nije u njemu, već je poanta u usklađenosti.

.example-text (text-align: center; padding: 10px; background: #FF90B8;)

Vrijedi napomenuti da će ovo svojstvo raditi ne samo za tekst, već i za sve umetnute elemente ("display: inline").

Ali ovaj je tekst poravnat lijevo, ali je u bloku koji je centriran u odnosu na omot.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text (prikaz: inline-block; širina: 40%; padding: 10px; text-align: lijevo; background: #FFE5E5 ;)

Poravnavanje blokova s ​​marginama

Elementi na razini bloka s poznatom širinom lako se poravnavaju vodoravno postavljanjem na "margin-left: auto; margin-right: auto". Obično se koristi skraćenica: " margina: 0 auto" (umjesto nule, može postojati bilo koja vrijednost). Ali za okomito poravnanje ova metoda neće raditi.

.lama-wrapper (visina: 200px; pozadina: #F1BF88;) .lama1 (visina: 200px; širina: 200px; pozadina: url(lama.jpg) ; margina: 0 auto ;)

Ovako se isplati poravnati sve blokove, gdje je to moguće (gdje nije potrebno fiksno ili apsolutno pozicioniranje) - to je najlogičnije i najprikladnije. Iako se ovo čini očitim, povremeno sam vidio zastrašujuće primjere s negativnim uvlakama, pa sam mislio da pojasnim.

Vertikalno poravnanje

Mnogo je više problema s okomitim poravnanjem - očito, to nije bilo predviđeno u CSS-u. Postoji nekoliko načina za postizanje željenog rezultata, ali svi nisu baš lijepi.

Poravnanje sa svojstvom line-height

U slučaju kada u bloku postoji samo jedan redak, možete postići njegovo okomito poravnanje primjenom " linija-visina" i postavite ga na željenu visinu. Da biste bili sigurni, trebali biste postaviti i "height", čija će vrijednost biti jednaka vrijednosti "line-height", jer potonja nije podržana u svim preglednicima.

.example-wrapper4 (visina linije: 100px; boja: #DC09C0; pozadina: #E5DAE1; visina: 100px; poravnanje teksta: središte;)

Također je moguće poravnati blok s više linija. Da biste to učinili, morat ćete upotrijebiti dodatni blok omota i postaviti mu visinu linije. Unutarnji blok može biti višeredni, ali mora biti "inline". Na njega morate primijeniti "vertical-align: middle".

.example-wrapper5 (visina linije: 160px; visina: 160px; veličina fonta: 0; pozadina: #FF9B00;) 1.5; okomito poravnanje: sredina; pozadina: #FFFAF2; boja: #FF9B00: središte teksta ;)

Blok omota mora imati postavljenu "font-size: 0". Ako veličinu fonta ne postavite na nulu, preglednik će sam dodati nekoliko dodatnih piksela. Također ćete morati odrediti veličinu fonta i visinu reda za unutarnji blok, jer su ta svojstva naslijeđena od nadređenog.

Vertikalno poravnanje u tablicama

Nekretnina " vertikalno poravnati" također utječe na ćelije tablice. S vrijednošću postavljenom na "sredinu", sadržaj unutar ćelije je centriran. Naravno, tablični izgled se danas smatra arhaičnim, ali u iznimnim slučajevima može se simulirati navođenjem " prikaz: tablica-ćelija".

Obično koristim ovu opciju za okomito poravnanje. Ispod je primjer izgleda preuzet iz gotovog projekta. Zanimljiva je slika koja je na ovaj način centrirana okomito.

.one_product .img_wrapper (prikaz: tablica-ćelija; visina: 169px; okomito poravnanje: sredina; prelijevanje: skriveno; pozadina: #fff; širina: 255px;) .one_product img (max-height: 169px; max-10width %; minimalna širina: 140px; zaslon: blok; margina: 0 auto;)

Treba imati na umu da ako element ima "float" set osim "none", onda će i dalje biti blok (prikaz: blok) - tada ćete morati koristiti dodatni omotač bloka.

Poravnanje s dodatnim inline elementom

A za inline elemente možete primijeniti " okomito poravnanje: sredina". U ovom slučaju, svi elementi s " zaslon: inline" koji se nalaze na istoj liniji poravnat će se sa zajedničkom središnjom linijom.

Morate stvoriti pomoćni blok s visinom jednakom visini roditeljskog bloka, tada će željeni blok biti centriran. Za ovo je prikladno koristiti pseudoelemente:prije ili:poslije.

.example-wrapper6 (visina: 300px; text-align: center; background: #70DAF1;) .pudge (prikaz: inline-block; vertical-align: middle; background: url(pudge.png); background-color: # fff ; širina : 200px ; visina : 200px ; ) .riki (prikaz: inline-block; visina: 100%; okomito poravnanje: sredina;)

Zaslon: savijanje i poravnavanje

Ako vam nije mnogo stalo do korisnika Explorera 8 ili vam je toliko stalo da ste spremni staviti dio dodatnog javascripta za njih, onda se može koristiti "display: flex". Flex kutije jako dobro rješavaju probleme s poravnavanjem, a dovoljno je napisati "margin: auto" da centrira sadržaj unutra.

Do sada me ova metoda praktički nikad nije srela, ali za nju nema posebnih ograničenja.

.example-wrapper7 (prikaz: flex; visina: 300px; pozadina: #AEB96A;) .example-wrapper7 img ( margina: auto ;)

Pa, to je sve što sam htio napisati o CSS poravnanju. Sada centriranje sadržaja neće biti problem!