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

#dijete (visina linije: 200px;)

Ova metoda radi u svim pretraživačima, ali ne zaboravite da je treba koristiti za red teksta. Ako se vaš tekst prostire na više od jednog reda, koristite drugu metodu. Vrijednost svojstva line-height može biti bilo koja, ali ne manja od visine fonta. U praksi, ova metoda je odlična za centriranje horizontalnog menija.

CSS metoda koja koristi svojstva tablice

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

#roditelj (prikaz: stol;) #dijete (prikaz:ćelija tablice; vertikalno poravnanje: sredina;)

Nažalost, ova metoda ne radi u starijim verzijama IE. Ako vam je potrebna podrška za IE6 i niže, dodajte display: inline-block deklaraciju podređenom elementu.

#dijete (prikaz: inline-block; )

Apsolutno pozicioniranje i negativna margina

Ova metoda je za elemente na nivou bloka i radi u svim pretraživačima. Morate postaviti visinu elementa koji će biti centriran.

Ispod je kod u kojem je podređeni element centriran pomoću date metode.

#roditelj (pozicija: relativna;) #dijete (pozicija: apsolutna; 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 ugao podređenog elementa staviti u centar nadređenog elementa, što nam, naravno, ne odgovara.

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

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

Za razliku od prve dvije metode, ova metoda je za elemente na nivou bloka. Metoda radi u svim pretraživačima, međutim, sadržaj može premašiti visinu nadređenog elementa i prevazići 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 i apsolutno.

U CSS kodu, ja centriram podređeni element i vertikalno i horizontalno, međutim možete koristiti samo vertikalno centriranje.

#roditelj (pozicija: relativna;) #dijete (pozicija: apsolutna; 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. Pošto je naš podređeni element manji od roditeljskog elementa, neće moći " stick” na roditeljski element.

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

Donja i gornja margina su jednake

U ovoj metodi, roditeljskom elementu izričito dodjeljujemo jednak padding (donji i gornji), zahvaljujući čemu 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, tada će biti potrebni neki matematički prorač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 vertikalnu poziciju podređenog elementa. Plutajući div mora biti postavljen prije podređenog elementa, pogledajte HTML kod ispod.

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

Prvo pomjerimo plutajuću kutiju ulijevo (ili udesno) i damo mu visinu od 50% nadređenog elementa. Na ovaj način će plutajući blok ispuniti gornju polovinu roditeljskog elementa.

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

Sada je gornja ivica podređenog elementa direktno ispod donje ivice plutajućeg elementa. Moramo podići podređeni element za polovinu visine plutajućeg elementa. Da biste to učinili, dovoljno je postaviti negativnu donju marginu jednaku 50% za plutajući blok.

Radi u svim pretraživačima. Nedostatak ove metode je što zahtijeva prazan blok i mora znati visinu podređenog elementa.

Mislim da su se mnogi od vas koji ste se bavili layoutom susreli s potrebom da se elementi poravnaju okomito i znaju kakve poteškoće nastaju kada se element poravna sa središtem.

Da, za vertikalno 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.

Uporedimo 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 - vanjske i unutrašnje.

Cilj je poravnati unutrašnji element sa središtem vanjskog elementa.

Za početak, razmotrite slučaj kada su veličine vanjskog i unutarnjeg bloka poznato. Dodajmo display: inline-block unutrašnjem elementu, a text-align: centar i vertical-align: sredini vanjskom elementu.

Imajte na umu da se poravnanje primjenjuje 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: centar; vertikalno poravnanje: sredina; boja pozadine: #ffc; ) .unutrašnji (prikaz: inline-blok; širina: 100px; visina: 100px; boja pozadine : #fcc;)
Nakon primjene stilova, vidjet ćemo da je unutrašnji blok poravnat vodoravno, ali ne i okomito:
http://jsfiddle.net/c1bgfffq/

Zašto se to dogodilo?Činjenica je da svojstvo vertical-align utiče na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga, primjena ove osobine na vanjski element nije učinila ništa. Štaviše, primjena ovog svojstva na unutrašnji element također neće učiniti ništa, budući da su inline-blokovi vertikalno poravnati sa susjednim blokovima, a u našem slučaju imamo jedan inline-blok.

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

Poravnanje sa stolom

Prvo rješenje koje vam pada na pamet je zamjena vanjskog bloka sa jednoćelijskom tablicom. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutrašnji blok.

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

Očigledan nedostatak ovog rješenja je što je sa stanovišta semantike pogrešno koristiti tabele za poravnanje. Drugi nedostatak je što da biste kreirali tabelu, morate dodati još jedan element oko vanjskog bloka.

Prvi minus se može djelomično ukloniti zamjenom tabele i td tagova sa div i postavljanjem načina prikaza tabele u CSS-u.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Ipak, vanjski blok će i dalje ostati stol sa svim posljedicama koje proizilaze.

Poravnanje sa paddingom

Ako su visine unutrašnjeg i vanjskog bloka poznate, onda se poravnanje može postaviti pomoću vertikalnog odsječka 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 sa visinom linije

Ako znate da unutrašnji blok ne bi trebao zauzimati više od jednog reda teksta, onda možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da se sadržaj unutrašnjeg bloka ne bi trebao premotati u drugi red, preporučuje se da dodate i white-space: nowrap i overflow: skrivena pravila.

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

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

Vanjski (visina: 200px; visina linije: 200px; ) .unutrašnja (visina linije: normalna; prikaz: inline-block; vertikalno poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/

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

Stretch Alignment

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

Za ovo vam je potrebno:

1. postaviti relativno pozicioniranje na vanjski blok, a apsolutno pozicioniranje na unutrašnji blok;
2. dodajte pravila gornji: 0 i donji: 0 unutrašnjem bloku, zbog čega će se protegnuti na cijelu visinu vanjskog bloka;
3. postavite vrijednost na auto za vertikalni padding unutrašnjeg bloka.

.vanjski (pozicija: relativna; ) .unutrašnja (visina: 100px; pozicija: apsolutna; vrh: 0; dno: 0; margina: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Suština ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje pretraživač da izračuna vertikalni padding u jednakoj proporciji ako je njihova vrijednost postavljena na auto .

Poravnanje sa 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 unutrašnjeg.

Morate postaviti vanjski blok na relativno pozicioniranje, a unutrašnji blok na apsolutno pozicioniranje. Zatim morate unutrašnju kutiju pomjeriti dolje do polovine visine gornje strane spoljne kutije: 50% i pomeriti je do polovine njene sopstvene visine margin-top: -H unutrašnja / 2.

Vanjski ( pozicija: relativna; ) .unutrašnja (visina: 100px; pozicija: apsolutna; vrh: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

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

Poravnanje sa transformacijom

Ova metoda je slična prethodnoj, ali se može primijeniti kada je visina unutrašnjeg bloka nepoznata. U ovom slučaju, umjesto postavljanja negativnog dopuna u pikselima, možete koristiti svojstvo transformacije i podići unutrašnju kutiju prema gore pomoću funkcije translateY i vrijednosti od -50% .

Vanjska ( pozicija: relativna; ) .unutrašnja ( pozicija: apsolutna; 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 procentualne vrijednosti svojstva margine relativne u odnosu na roditeljski element, vrijednost od 50% bi bila jednaka polovini visine vanjskog okvira, a mi bismo morali podići unutrašnji okvir za polovinu njegove vlastite visine. To je upravo ono čemu služi svojstvo transformacije.

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

Usklađivanje sa Flexboxom

Najmoderniji način za vertikalno poravnanje je korištenje fleksibilnog rasporeda kutije (popularno poznatog kao Flexbox). Ovaj modul vam omogućava fleksibilnu kontrolu pozicioniranja elemenata na stranici, postavljajući ih gotovo bilo gdje. Centralno poravnanje za Flexbox je vrlo jednostavan zadatak.

Vanjski blok treba postaviti na display: flex, a unutrašnji blok na margin: auto. I to je sve! Prelepo, zar ne?

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

Nedostatak ove metode je što Flexbox podržavaju samo moderni pretraživači.

Koji način odabrati?

Potrebno je poći od iskaza problema:

• Za vertikalno poravnanje teksta, bolje je koristiti vertikalni padding ili svojstvo line-height.
• Za apsolutno pozicionirane elemente sa poznatom visinom (kao što su ikone), pristup negativne margine na vrhu je idealan.
• 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

Kada kreirate div blokove, vjerovatno ste naišli na situacije u kojima morate centrirati svoj div horizontalno i vertikalno koristeći čisti CSS. Na primjer, kada kreirate iskačuće prozore sa . Postoji nekoliko načina za implementaciju centriranja, a u ovom članku ću pokriti svoje omiljene i najlakše načine, koristeći CSS ili jQuery.

Za početak, osnove:

Horizontalno centriranje u CSS-u

Ovo je lako za napraviti, mi koristimo margina za naš div blok.

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

Da biste centrirali div blok samo vodoravno, trebate definirati širinu (širinu) bloka, koristite 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...), morate primijeniti opciju prikaz:blok;

Horizontalno i vertikalno 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; )

Via apsolutno pozicioniranje bloka, možemo ga odvojiti od okolnih elemenata i odrediti njegovu poziciju u odnosu na veličinu prozora pretraživača. Premjestite div blok na 50% lijevo i na vrhu prozora. Sada je gornji lijevi ugao bloka u sredini prozora pretraživača. Ostaje da postavite div blok u centar stranice tako što ćete ga premjestiti na pola njegove širine lijevo i pola svoje visine gore. Ura! Pokazalo se odlično centriranje blokova na čistom css kodu.

Horizontalno i vertikalno centriranje sa jQuery-jem

Kao što je već spomenuto, CSS metoda centriranja radi samo sa 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: ($(window).height() - $(".className").outerHeight())/2 )); )); // Za pokretanje funkcije kada se prozor učita: $(window).resize();

Funkcija ove metode je da pokrene funkciju resize(), koristeći liniju $(window).resize(). Ova funkcija radi kad god se promijeni veličina prozora pretraživača. 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. Posljednji red 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 multifunkcionalna 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: horizontalno ili okomito. Postoji nekoliko dobrih članaka na ovu temu, ali svi oni nude mnogo zanimljivih, ali malo praktičnih opcija, zbog čega morate gubiti dodatno vrijeme da istaknete ono glavno. Odlučio sam da dostavim ove podatke 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 da poravnate okvire koji imaju unaprijed određenu visinu (za vertikalno poravnanje) ili širinu (za horizontalno poravnanje).

Poravnanje sa paddingom

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

Na primjer, postoji slika 200 x 200 piksela, a mi želimo da je centriramo u blok od 240 x 300. Možemo postaviti visinu i širinu vanjskog bloka = 200px, i 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", onda se može pozicionirati u odnosu na najbliži roditelj sa "pozicijom: relativno". Za ovo, sva svojstva (" top","u pravu","dnu","lijevo") unutrašnjeg bloka za dodjelu iste vrijednosti, kao i "margin: auto".

*Postoji nijansa: širina (visina) unutrašnjeg bloka + vrijednost lijevog (desno, dolje, gore) ne smije prelaziti veličinu roditeljskog bloka. Sigurnije je postaviti lijeva (desna, donja, gornja) 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 sa "text-align: center"

Za poravnavanje teksta u bloku postoji posebno svojstvo " text-align". Kada je postavljeno na " centar" svaki red teksta će biti vodoravno poravnat. Za tekst u više redaka ovo rješenje se rijetko koristi, češće se može naći ova opcija za poravnavanje raspona, linkova ili slika.

Jednom sam morao smisliti tekst da pokažem kako poravnavanje teksta funkcionira sa CSS-om, ali ništa zanimljivo mi nije palo na pamet. Prvo sam odlučio da negdje kopiram pjesmicu, ali sam se sjetio da bi to moglo pokvariti jedinstvenost članka, a naši dragi čitatelji to neće moći pronaći na Guglu. I onda sam odlučio da napišem ovaj pasus ovdje – na kraju krajeva, poenta nije u njemu, već je poenta u usklađivanju.

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

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

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

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

Poravnavanje blokova sa marginama

Elementi na nivou bloka sa poznatom širinom lako se poravnavaju horizontalno 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 vertikalno 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 vrijedi poravnati sve blokove, gdje je to moguće (gdje nije potrebno fiksno ili apsolutno pozicioniranje) - to je najlogičnije i adekvatnije. Iako se ovo čini očiglednim, povremeno sam viđao zastrašujuće primjere s negativnim uvlakama, pa sam mislio da razjasnim.

Vertikalno poravnanje

Mnogo je više problema sa vertikalnim poravnanjem - očigledno, to nije bilo predviđeno u CSS-u. Postoji nekoliko načina da se postigne željeni rezultat, ali svi nisu baš lijepi.

Poravnanje sa svojstvom line-height

U slučaju kada u bloku postoji samo jedna linija, možete postići njeno vertikalno poravnanje primjenom " visina linije" i postavite ga na željenu visinu. Da biste bili sigurni, trebali biste postaviti i "height", čija će vrijednost biti jednaka vrijednosti "line-height", jer ovo drugo nije podržano u svim pretraživačima.

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

Također je moguće poravnati blok sa više linija. Da biste to učinili, morat ćete koristiti dodatni blok omotača i postaviti mu visinu linije. Unutrašnji blok može biti višelinijski, 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; vertikalno poravnanje: sredina; pozadina: #FFFAF2; boja: #FF9B00: text-align; ;)

Blok omotača mora imati postavljenu "font-size: 0". Ako veličinu fonta ne postavite na nulu, pretraživač će sam dodati nekoliko dodatnih piksela. Također ćete morati navesti veličinu fonta i visinu reda za unutrašnji blok, jer su ova svojstva naslijeđena od roditelja.

Vertikalno poravnanje u tabelama

Nekretnina " vertikalno poravnanje" također utiče na ćelije tabele. Sa vrijednošću postavljenom na "sredina", sadržaj unutar ćelije je centriran. Naravno, tabelarni izgled se danas smatra arhaičnim, ali u izuzetnim slučajevima može se simulirati navođenjem " displej: ćelija tabele".

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

.one_product .img_wrapper ( display : table-cell ; visina : 169px ; vertikalno poravnanje : sredina ; overflow : skriveno ; pozadina : #fff ; širina : 255px ; ) .one_product img ( max-height : 169px : max-10width %; minimalna širina: 140px; prikaz: blok; margina: 0 auto;)

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

Poravnanje sa dodatnim inline elementom

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

Morate kreirati pomoćni blok visine jednake visini roditeljskog bloka, tada će željeni blok biti centriran. Za ovo je zgodno koristiti pseudoelemente:prije ili:poslije.

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

Prikaz: savijanje i poravnanje

Ako vam nije stalo do korisnika Explorera 8, ili vam je toliko stalo da ste voljni ubaciti dio dodatnog javascripta za njih, onda se može koristiti "display: flex". Flex kutije zaista dobro rješavaju probleme sa poravnanjem, a dovoljno je napisati "margin: auto" da centrira sadržaj unutar.

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

.example-wrapper7 ( display : 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!