Poravnava apsolutni element prema središtu. CSS centriranje DIV blokova: vodoravno i okomito

18.02.15. 21,4K

Ako izrežete bilo koju web stranicu stvorenu na temeljen na html-u, tada će se ispred vas pojaviti određena struktura sloj-po-sloj. Štoviše, sa svojom izgled bit će sličan slojevitoj torti. Ako tako mislite, onda najvjerojatnije niste dugo jeli. Dakle, prvo utažite svoju glad, a onda ćemo vam reći kako centrirati div sloj na vašoj stranici:

Prednosti izgleda pomoću oznake

Postoje dvije glavne vrste strukture web stranice:

• tablični;
• Blok.

Tablični izgled bio je dominantan čak iu zoru Interneta. Njegove prednosti uključuju točnost navedenog pozicioniranja. Ali, ipak, ima očite nedostatke. Glavni su volumen koda i mala brzina Preuzimanja.

Kada koristite tablični izgled, web stranica neće biti prikazana sve dok puno opterećenje. Dok se kod korištenja div blokova elementi prikazuju odmah.

Osim velika brzina učitavanje blok konstrukcija stranice omogućuje smanjenje volumena nekoliko puta html kod. Uključujući korištenje CSS klasa.

Međutim, treba koristiti tablični izgled za strukturiranje prikaza podataka na stranici. Klasičan primjer njegove uporabe je prikaz tablica.

Konstrukcija blokova temeljena na oznakama naziva se i sloj po sloj, a sami blokovi slojevi. To je zato što kada se koriste određene vrijednosti svojstava, one se mogu naslagati jedna na drugu, slično slojevima u Photoshopu.

Pomagala za pozicioniranje

U raspored blokova Bolje je postaviti slojeve pomoću kaskadnih stilskih listova. Glavno CSS svojstvo odgovorno za izgled je float.
Sintaksa svojstva:
plovak: lijevo | desno | nijedan | naslijediti
Gdje:

• lijevo – poravnajte element na lijevi rub ekrana. Tijek oko preostalih elemenata događa se s desne strane;
• desno – poravnanje desno, tok oko ostalih elemenata – lijevo;
• ništa – omatanje nije dopušteno;
• naslijediti – vrijednosno nasljeđe nadređeni element.

Pogledajmo lagani primjer pozicioniranja divova pomoću ovog svojstva:

#lijevo (širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,51,102); ) #desno (širina: 200px; visina: 100px; float: desno; pozadina: rgb(0,255,153); ) Lijevi blok Desni blok

Sada ćemo pokušati upotrijebiti isto svojstvo za postavljanje trećeg diva u središte stranice. No, nažalost, float nema središnju vrijednost. A kada novom bloku date vrijednost poravnanja udesno ili ulijevo, on se pomiče u navedenom smjeru. Dakle, sve što preostaje je postaviti float: left na sva tri bloka:

Ali ovo nije najbolja opcija. Kada se prozor smanji, svi slojevi se poredaju u jedan red okomito, a kada se poveća, lijepe se na lijevi rub prozora. Dakle, trebamo bolji način za centriranje diva. Centriranje slojeva

U sljedeći primjer Koristit ćemo sloj spremnika u koji ćemo smjestiti preostale elemente. Ovo rješava problem pomicanja blokova jedan u odnosu na drugi kada se promijeni veličina prozora. Centriranje spremnika u sredini vrši se postavljanjem margine svojstava nulta vrijednost margine od gornjeg ruba i auto sa strane (margina: 0 auto):

#container (width: 600px; margin: 0 auto; ) #left ( width: 200px; height: 100px; float: left; background: rgb(255,51,102); ) #right ( width: 200px; height: 100px; float : lijevo; pozadina: rgb(0,255,153); ) #center ( širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,0,0); ) Lijevi blok Središnji blok Desni blok

Isti primjer pokazuje kako div možete centrirati vodoravno. A ako malo uredite gornji kod, možete postići okomito poravnanje blokova. Da biste to učinili, samo trebate promijeniti duljinu sloja spremnika (smanjiti ga). Odnosno, nakon uređivanja njegova css klasa trebala bi izgledati ovako:

Nakon promjene, svi blokovi će se poredati strogo u jedan red u sredini. I njihov se položaj neće promijeniti bez obzira na veličinu prozora preglednika. Evo kako izgleda okomito centriranje diva:

U sljedećem smo primjeru upotrijebili niz novih za centriranje slojeva unutar spremnika. css svojstva :

#container (width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; ) #left (width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertikalno poravnanje: sredina; margina-lijevo: 35px; ) #desno (širina: 100px; visina: 100px; pozadina: rgb(0,255,153); prikaz: inline-block; okomito poravnanje: sredina; margina-lijevo: 35px; ) #center (širina: 100px; visina: 100px; pozadina: rgb(255,0,0); prikaz: inline-block; okomito poravnanje: sredina; margina-lijevo: 35px; )

Kratak opis css svojstava i njihovih vrijednosti koje smo koristili u u ovom primjeru za centriranje diva unutar diva:

• prikaz: inline-block – poravnava element bloka u liniju i osigurava da se obavija oko drugog elementa;
• vertical-align: middle – poravnava element u sredini u odnosu na roditelja;
• margin-left – postavlja lijevu marginu.

Kako napraviti vezu iz sloja

Koliko god čudno zvučalo, to je moguće. Ponekad može biti potreban div blok kao veza tijekom izgleda različite vrste Jelovnik. Razmotrimo praktični primjer implementacija sloja veze:

#layer1( width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) a ( display: block; text-align: center; height: 100%; color: rgb(255,0,51) ;) Link na našu web stranicu

U ovom primjeru, koristeći line display: block, postavljamo vezu na vrijednost elementa bloka. I tako da cijela visina div bloka postane veza, postavite visinu: 100%. Sakrij i pokaži blok elementi

Elementi bloka pružaju više mogućnosti proširiti funkcionalnost sučelja od zastarjelog tabelarnog izgleda. Često se događa da je dizajn web stranice jedinstven i prepoznatljiv. Ali za takvu ekskluzivu morate platiti nedostatkom slobodnog prostora.

Posebno se tiče početna stranica, na kojem je trošak oglašavanja najveći. Stoga se javlja problem gdje "ugurati" drugu reklamni banner. A sada div poravnanje Nema šanse da se izvučete s tim na središtu stranice!

Racionalnije rješenje je učiniti neki blok skrivenim. Evo jednostavnog primjera takve implementacije:

#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( sloj1="ništa"; ) document.getElementById("sloj1").style.display=sloj1; )

Ovo je čarobni gumb. Klikom na njega sakrit ćete ili prikazati blok za skrivanje.

Na stvaranje div blokova, vjerojatno ste naišli na situacije u kojima trebate centrirati div vodoravno i okomito koristeći čisti CSS. Na primjer, kada stvarate skočne prozore pomoću . Postoji nekoliko načina za implementaciju centriranja, au ovom ću članku podijeliti svoje omiljene i najlakše načine, koristeći CSS ili jQuery.

Prvo, osnove:

Horizontalno centriranje u CSS-u

Ovo je lako učiniti, mi koristimo margina za naše div blok.

ClassName( margin:0 auto; width:200px; height:200px; )

Za centriranje blok div samo horizontalno, potrebno je definirati širinu bloka (širinu), koristiti svojstvo auto za lijevu i desnu marginu. Ova metoda će raditi za sve elemente bloka (div, p, h1, i tako dalje...). Da biste primijenili horizontalno centriranje na inline elemente (linkove, slike...), morate primijeniti display: block;

Horizontalno i okomito centriranje u CSS-u

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

ClassName( width:300px; height:200px; position:apsolute; left:50%; top:50%; margin:-100px 0 0 -150px; )

Apsolutnim pozicioniranjem bloka možemo ga odvojiti od okolnih elemenata i odrediti njegovu poziciju u odnosu na veličinu prozora preglednika. Pomaknite div blok 50% ulijevo i na vrh prozora. Gornji lijevi kut bloka sada je u sredini prozora preglednika. Sve što preostaje je postaviti div blok u središte stranice pomicanjem pola širine ulijevo i pola visine prema gore. hura! Rezultat je bilo izvrsno centriranje bloka čisti css kodirati.

Horizontalno i okomito centriranje s jQueryjem

Kao što je ranije spomenuto - CSS metoda centriranje radi samo s fiksnim dimenzijama. Ako dimenzije nisu definirane, jQuery metoda će doći u pomoć:

$(window).resize(function())( $(".className").css(( position:"absolute", lijevo: ($(window).width() - $(".className").outerWidth ( ))/2, gore: ($(window).height() - $(".className").outerHeight())/2 )); )); // Za pokretanje funkcije kada je prozor učitan: $(window).resize();

Operacija ovu metodu je pokrenuti resize() funkciju pomoću linije $(window).resize() . Ova funkcija radi kad god se promijeni veličina prozora preglednika. Koristimo outerWidth() i outerHeight() jer, za razliku od width() i height() , oni uključuju ispunu i debljinu rubova u veličini koju vraćaju. Posljednji redak započinje proces centriranja div bloka kada se stranica učita.

Prednost korištenja ove metode je ta što možda nećete znati koja je veličina diva. Glavni nedostatak– ovo 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 za centriranje blokova komentiranjem.

Koliko je kopija već razbijeno oko zadatka poravnavanja elemenata na stranici. Predstavljam vam prijevod izvrsnog članka s rješenjem ovog problema od Stephena Shawa za časopis Smashing - Apsolutno horizontalno i okomito centriranje u CSS-u.

Svi smo znali za maržu: 0 auto; za horizontalno centriranje, ali margina: auto; nije radio za vertikalu. To se lako može popraviti jednostavnim postavljanjem visine i primjenom sljedećih stilova:

Apsolutni centar (margina: auto; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno: 0; )
Nisam prvi koji je predložio ovo rješenje, ali ovaj se pristup rijetko koristi okomito poravnanje. U komentarima na članak Kako centrirati bilo što s CSS-om, Simon se poziva na primjer jsFiddle koji pruža savršeno rješenje za okomito centriranje. Evo još nekoliko na ovu temu.

Pogledajmo pobliže metodu.

Prednosti

• Kompatibilnost s više preglednika (uključujući IE 8-10)
• Nema dodatnog označavanja, minimalan stil
• Prilagodljivost
• Neovisnost o podstavi (bez veličine kutije!)
• Radi za slike

Mane

• Visina mora biti navedena (pogledajte Varijabilna visina)
• Preporučljivo je postaviti overflow: auto kako se sadržaj ne bi širio
• Ne radi na Windows Phoneu

Kompatibilnost s preglednikom Metoda je testirana i odlično radi u Chromeu, Firefoxu, Safariju, Mobile Safariju pa čak i IE 8-10. Jedan je korisnik spomenuo da se sadržaj ne poravnava okomito na Windows Phoneu. Unutar spremnika Sadržaj smješten u spremnik s položajem: relativno će se dobro poravnati:

Apsolutni centar (širina: 50%; visina: 50%; preljev: automatski; margina: automatski; pozicija: apsolutna; vrh: 0; lijevo: 0; dolje: 0; desno: 0; )

Korištenje okvira za prikaz Postavite sadržaj na položaj: fiksno i postavite z-indeks:

Absolute-Center.is-Fixed (širina: 50%; visina: 50%; preljev: automatski; margina: automatski; pozicija: fiksna; vrh: 0; lijevo: 0; dno: 0; desno: 0; z-indeks: 999; )

Prilagodljivost Glavna prednost opisane metode je da savršeno funkcionira kada su visina ili širina navedene u postocima, pa čak i razumijevanje min-width/max-width i min-height/max-height.

Absolute-Center.is-Responsive (širina: 60%; visina: 60%; minimalna širina: 400px; maksimalna širina: 500px; padding: 40px; preljev: auto; margina: auto; pozicija: apsolutna; vrh: 0; lijevo: 0; dolje: 0; desno: 0; )

Pomaci Ako stranica ima fiksno zaglavlje ili trebate napraviti neku drugu uvlaku, samo trebate dodati kod kao što je top: 70px; u stilove. Dok je margina postavljena: auto; blok sadržaja bit će ispravno centriran po visini.

Također možete poravnati sadržaj na željenu stranu, ostavljajući centriranje po visini. Da biste to učinili morate koristiti right: 0; lijevo: auto; za desno ili lijevo poravnanje: 0; desno: auto; za lijevo poravnanje.

Absolute-Center.is-Right (širina: 50%; visina: 50%; margina: auto; preljev: auto; pozicija: apsolutna; vrh: 0; lijevo: auto; dno: 0; desno: 20px; poravnanje teksta: točno;)

Puno sadržaja Kako bismo osigurali da velika količina sadržaja ne dopušta odstupanje izgleda, koristimo overflow: auto . Pojavit će se okomita traka za pomicanje. Također možete dodati max-height: 100%; ako sadržaj nema dodatnu podlogu.
.Absolute-Center.is-Overflow ( širina: 50%; visina: 300px; maks. visina: 100%; margina: auto; preljev: auto; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno : 0; )

Slike Ova metoda izvrsno funkcionira i za slike! Visina dodavanja stila: auto; tada će se slika skalirati zajedno sa spremnikom.

Absolute-Center.is-Image ( širina: 50%; visina: auto; margina: auto; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno: 0; )

Varijabilna visina Opisana metoda zahtijeva zadanu visinu bloka, koja se može specificirati kao postotak i kontrolirati pomoću maksimalne visine, što metodu čini idealnom za responzivna mjesta. Jedan od načina da ne postavite visinu je pomoću zaslona:stol. U ovom slučaju, blok sadržaja je centriran bez obzira na veličinu.

Možda postoje problemi s kompatibilnošću s više preglednika, možda biste trebali upotrijebiti metodu ćelija tablice (opisanu u nastavku).

• Firefox/IE8: Korištenje display: table poravnava blok okomito s vrhom dokumenta.
• IE9/10: Korištenje prikaza: tablica poravnava blok lijevo gornji kut stranice.
• Mobile Safari: ako je širina postavljena na postotak, horizontalno centriranje trpi

.Absolute-Center.is-Variable ( display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; )

Ostale metode Opisana metoda dobro funkcionira u većini slučajeva, ali postoje i druge metode koje se mogu primijeniti za rješavanje specifičnih problema. Negativna margina Vjerojatno najviše popularan način. Prikladno ako su poznate dimenzije bloka.

Je negativan ( širina: 300px; visina: 200px; ispuna: 20px; pozicija: apsolutna; vrh: 50%; lijevo: 50%; margina-lijevo: -170px; /* (širina + ispuna)/2 */ margina- vrh: -120px; /* (visina + ispuna)/2 */ )
Prednosti:

• Kompatibilnost s različitim preglednicima
• Minimalni kod

Mane:

• Nije prilagodljiv
• Izgled se mijenja ako u spremniku ima previše sadržaja
• Morate nadoknaditi ispunu ili koristiti veličinu okvira: border-box

Korištenje transforma Jedan od naj jednostavnih načina, podržava promjene visine. Postoji detaljan članak o ovoj temi - "Centriranje postotnih elemenata širine/visine" iz CSS-Tricks.

Is-Transformed ( širina: 50%; margina: auto; pozicija: apsolutna; vrh: 50%; lijevo: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%); transform: prevedi(-50%,-50%); )
Prednosti:

• Promjenjive visine
• Minimalni kod

Mane:

• Ne radi u IE 8
• Korištenje prefiksa
• Može ometati druge učinke transformacije
• U nekim su slučajevima rubovi blokova i tekst zamućeni tijekom renderiranja

Table-cell Možda jedan od najboljih i najlakših načina. Detaljno opisano u članku "Fleksibilno okomito centriranje visine s CSS-om, izvan IE7" autora 456bereasttreet. Glavni nedostatak je dodatno označavanje: potrebna su tri elementa:

<!-- SADRŽAJ -->
CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( width: 50%; margina: 0 automatski; )
Prednosti:

• Promjenjive visine
• Raspored ne radi kada velike količine tekst u bloku
• Kompatibilnost s različitim preglednicima

Mane:

• Složena struktura

Flexbox Budućnost CSS-a, flexbox će riješiti mnoge današnje probleme izgleda. Ovo je detaljno napisano u članku časopisa Smashing pod nazivom Centriranje elemenata s Flexboxom.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: centar; -ms-flex-align: centar; -webkit-align-items: centar; align-items: centar; -webkit-box-pack: centar; -moz-box-pack: centar; -ms-flex-pack: centar; -webkit-justify-content: centar; justify-content: centar; )
Prednosti:

• Sadržaj može biti bilo koje visine ili širine
• Može se koristiti u složenijim slučajevima

Mane:

• Nema podrške za IE 8-9
• Zahtijeva spremnik ili stilove u tijelu
• Zahtijeva veliki izbor prefiksa za ispravan rad u modernim preglednicima
• Mogući problemi s performansama

Zaključak Svaka metoda ima prednosti i nedostatke. U biti, izbor se svodi na odabir preglednika koji će biti podržani

Koliko je kopija već razbijeno oko zadatka poravnavanja elemenata na stranici. Predstavljam vam prijevod izvrsnog članka s rješenjem ovog problema od Stephena Shawa za časopis Smashing - Apsolutno horizontalno i okomito centriranje u CSS-u.

Svi smo znali za maržu: 0 auto; za horizontalno centriranje, ali margina: auto; nije radio za vertikalu. To se lako može popraviti jednostavnim postavljanjem visine i primjenom sljedećih stilova:

Apsolutni centar (margina: auto; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno: 0; )
Nisam prvi koji je predložio ovo rješenje, ali ovaj se pristup rijetko koristi za okomito poravnanje. U komentarima na članak Kako centrirati bilo što s CSS-om, Simon se povezuje na primjer jsFiddle koji pruža odlično rješenje za okomito centriranje. Evo još nekoliko na ovu temu.

Pogledajmo pobliže metodu.

Prednosti

• Kompatibilnost s više preglednika (uključujući IE 8-10)
• Nema dodatnog označavanja, minimalan stil
• Prilagodljivost
• Neovisnost o podstavi (bez veličine kutije!)
• Radi za slike

Mane

• Visina mora biti navedena (pogledajte Varijabilna visina)
• Preporučljivo je postaviti overflow: auto kako se sadržaj ne bi širio
• Ne radi na Windows Phoneu

Kompatibilnost s preglednikom Metoda je testirana i odlično radi u Chromeu, Firefoxu, Safariju, Mobile Safariju pa čak i IE 8-10. Jedan je korisnik spomenuo da se sadržaj ne poravnava okomito na Windows Phoneu. Unutar spremnika Sadržaj smješten u spremnik s položajem: relativno će se dobro poravnati:

Apsolutni centar (širina: 50%; visina: 50%; preljev: automatski; margina: automatski; pozicija: apsolutna; vrh: 0; lijevo: 0; dolje: 0; desno: 0; )

Korištenje okvira za prikaz Postavite sadržaj na položaj: fiksno i postavite z-indeks:

Absolute-Center.is-Fixed (širina: 50%; visina: 50%; preljev: automatski; margina: automatski; pozicija: fiksna; vrh: 0; lijevo: 0; dno: 0; desno: 0; z-indeks: 999; )

Prilagodljivost Glavna prednost opisane metode je da savršeno funkcionira kada su visina ili širina navedene u postocima, pa čak i razumijevanje min-width/max-width i min-height/max-height.

Absolute-Center.is-Responsive (širina: 60%; visina: 60%; minimalna širina: 400px; maksimalna širina: 500px; padding: 40px; preljev: auto; margina: auto; pozicija: apsolutna; vrh: 0; lijevo: 0; dolje: 0; desno: 0; )

Pomaci Ako stranica ima fiksno zaglavlje ili trebate napraviti neku drugu uvlaku, samo trebate dodati kod kao što je top: 70px; u stilove. Dok je margina postavljena: auto; blok sadržaja bit će ispravno centriran po visini.

Također možete poravnati sadržaj na željenu stranu, ostavljajući centriranje po visini. Da biste to učinili morate koristiti right: 0; lijevo: auto; za desno ili lijevo poravnanje: 0; desno: auto; za lijevo poravnanje.

Absolute-Center.is-Right (širina: 50%; visina: 50%; margina: auto; preljev: auto; pozicija: apsolutna; vrh: 0; lijevo: auto; dno: 0; desno: 20px; poravnanje teksta: točno;)

Puno sadržaja Kako bismo osigurali da velika količina sadržaja ne dopušta odstupanje izgleda, koristimo overflow: auto . Pojavit će se okomita traka za pomicanje. Također možete dodati max-height: 100%; ako sadržaj nema dodatnu podlogu.
.Absolute-Center.is-Overflow ( širina: 50%; visina: 300px; maks. visina: 100%; margina: auto; preljev: auto; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno : 0; )

Slike Ova metoda izvrsno funkcionira i za slike! Visina dodavanja stila: auto; tada će se slika skalirati zajedno sa spremnikom.

Absolute-Center.is-Image ( širina: 50%; visina: auto; margina: auto; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno: 0; )

Varijabilna visina Opisana metoda zahtijeva zadanu visinu bloka, koja se može specificirati kao postotak i kontrolirati pomoću maksimalne visine, što metodu čini idealnom za responzivna mjesta. Jedan od načina da ne postavite visinu je korištenje display: table. U ovom slučaju, blok sadržaja je centriran bez obzira na veličinu.

Možda postoje problemi s kompatibilnošću s više preglednika, možda biste trebali upotrijebiti metodu ćelija tablice (opisanu u nastavku).

• Firefox/IE8: Korištenje display: table poravnava blok okomito s vrhom dokumenta.
• IE9/10: Korištenje prikaza: tablica poravnava blok u gornji lijevi kut stranice.
• Mobile Safari: ako je širina postavljena na postotak, horizontalno centriranje trpi

.Absolute-Center.is-Variable ( display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; )

Ostale metode Opisana metoda radi odlično u većini slučajeva, ali postoje i druge metode koje se mogu koristiti za rješavanje specifičnih problema Negativna margina Vjerojatno najpopularnija metoda. Prikladno ako su poznate dimenzije bloka.

Je negativan ( širina: 300px; visina: 200px; ispuna: 20px; pozicija: apsolutna; vrh: 50%; lijevo: 50%; margina-lijevo: -170px; /* (širina + ispuna)/2 */ margina- vrh: -120px; /* (visina + ispuna)/2 */ )
Prednosti:

• Kompatibilnost s različitim preglednicima
• Minimalni kod

Mane:

• Nije prilagodljiv
• Izgled se mijenja ako u spremniku ima previše sadržaja
• Morate nadoknaditi ispunu ili koristiti veličinu okvira: border-box

Korištenje transformacije Jedna od najjednostavnijih metoda, podržava promjene visine. Postoji detaljan članak o ovoj temi - "Centriranje postotnih elemenata širine/visine" iz CSS-Tricks.

Is-Transformed ( širina: 50%; margina: auto; pozicija: apsolutna; vrh: 50%; lijevo: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%); transform: prevedi(-50%,-50%); )
Prednosti:

• Promjenjive visine
• Minimalni kod

Mane:

• Ne radi u IE 8
• Korištenje prefiksa
• Može ometati druge učinke transformacije
• U nekim su slučajevima rubovi blokova i tekst zamućeni tijekom renderiranja

Table-cell Možda jedan od najboljih i najlakših načina. Detaljno opisano u članku "Fleksibilno okomito centriranje visine s CSS-om, izvan IE7" autora 456bereasttreet. Glavni nedostatak je dodatno označavanje: potrebna su tri elementa:

<!-- SADRŽAJ -->
CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( width: 50%; margina: 0 automatski; )
Prednosti:

• Promjenjive visine
• Raspored ne radi kada postoji velika količina teksta u bloku
• Kompatibilnost s različitim preglednicima

Mane:

• Složena struktura

Flexbox Budućnost CSS-a, flexbox će riješiti mnoge današnje probleme izgleda. Ovo je detaljno napisano u članku časopisa Smashing pod nazivom Centriranje elemenata s Flexboxom.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: centar; -ms-flex-align: centar; -webkit-align-items: centar; align-items: centar; -webkit-box-pack: centar; -moz-box-pack: centar; -ms-flex-pack: centar; -webkit-justify-content: centar; justify-content: centar; )
Prednosti:

• Sadržaj može biti bilo koje visine ili širine
• Može se koristiti u složenijim slučajevima

Mane:

• Nema podrške za IE 8-9
• Zahtijeva spremnik ili stilove u tijelu
• Zahtijeva veliki izbor prefiksa za ispravan rad u modernim preglednicima
• Mogući problemi s performansama

Zaključak Svaka metoda ima prednosti i nedostatke. U biti, izbor se svodi na odabir preglednika koji će biti podržani

U procesu postavljanja web stranica, zadatak centriranja blokova prilično je uobičajen. To može biti okomito ili vodoravno centriranje.

Na primjer, ako stranica ima fiksna širina, tada bi bilo racionalno poravnati ga u sredini prozora preglednika, jer to čini tekst lakšim za čitanje (osobito ako je monitor velik). Neki dizajni općenito uključuju postavljanje bloka u središte prozora preglednika, tj. okomito i vodoravno centriranje.

Prvo, razgovarajmo o horizontalnom centriranju. Najpopularnija tehnika je centriranje bloka postavljanjem desne i lijeve margine na "auto" . Recimo da želimo centrirati blok s id = "container" i širinom od 860px. U ovom slučaju, u CSS datoteka trebate napisati:

#kontejner (
boja pozadine:#EEE;
širina:860px;
margina:0px auto;
}

Međutim, I.E. starije verzije (na primjer 5.0) neće poravnati ovaj blok u sredini. Naravno, nitko više ne koristi takve prastare preglednike (od 1800 mojih dnevnih posjetitelja - samo 1), ali za svaki slučaj, bolje da i tamo radi :)

Da bismo to učinili, roditeljski element, to jest onaj unutar kojeg centriramo naš blok (obično je roditeljski element oznaka TIJELO), trebate postaviti parametar text-align:center. U ovom slučaju blok će biti poravnat prema sredini, ali će i sav njegov sadržaj biti poravnat prema sredini, ali to nam ne treba. Stoga unutar ovog bloka postavljamo zadano poravnanje - text-align:left .

tijelo (text-align:center)

#kontejner (
boja pozadine:#EEE;
širina:860px;
margina:0px auto;
poravnanje teksta: lijevo;
}

Postoji i drugi način horizontalno poravnanje blok na temelju . Kao što vjerojatno znate, prema zadanim postavkama, svaki blok element je pritisnut na lijevi rub nadređenog elementa. Stoga, da biste ga poravnali sa središtem, trebate:

2. Pomaknite ga udesno za 50% širine prozora preglednika

3. Koristeći negativnu ispunu, pomaknite ga ulijevo za udaljenost jednaku polovici širine bloka.

Na ovaj način blok će biti centriran. Za veću jasnoću pogledajte videozapis u nastavku:

Primjer CSS koda:

#kontejner (
boja pozadine:#559964;
pozicija: apsolutna;
lijevo:50%;
margin-left:-430px;
širina:860px;
}

Treba napomenuti da ako želite postaviti blok ne u odnosu na prozor preglednika, već, na primjer, u odnosu na drugi blok, tada za ovaj drugi blok trebate postaviti position: relative;

Recimo da se naš #container blok, koji treba centrirati, nalazi unutar #wrap bloka. Tada će kod izgledati ovako:

#wrap(položaj:relativni)

#kontejner (
boja pozadine:#559964;
pozicija: apsolutna;
lijevo:50%;
margin-left:-430px;
širina:860px;
}

Sada pogledajmo slučaj kada trebate poravnati blok prema središtu stranice, tj. Primijenite vodoravno i okomito centriranje istovremeno. Ovdje ponovno dolazi do izražaja pozicioniranje. Dakle trebamo:

1. Postavite blok apsolutno pozicioniranje

2. Pomaknite ga udesno za 50% i dolje za 50%, postavljajući tako njegov gornji lijevi kut u središte prozora preglednika.

3. Koristeći negativnu ispunu, pomaknite ga prema gore za udaljenost koja je jednaka polovici visine bloka i ulijevo za udaljenost jednaku polovici širine bloka.

Ovo će postaviti blok u središte web stranice.

Recimo da je visina našeg bloka 600px, a širina 860px. Tada će CSS kod izgledati ovako:

#kontejner (
boja pozadine:#559964;
pozicija: apsolutna;
vrh:50%;
lijevo:50%;
margin-top:-300px;
margin-left:-430px;
visina:600px;
širina:860px;
}

Nadam se da vam je sam princip jasan.

Ocijenite lekciju: 1 2 3 4 5

Komentari:

Ja ću prvi gledati lekciju!!!

Eh... Drugo =) Nedavno sam naišao na ovaj problem u IE, patio sam dugo)) Hvala =)

Hvala, označena stranica)))

Puno vam hvala, Andrey, na novim lekcijama!

Samo hvala, mislim da se ovdje nema što dodati))

Hvala na lekciji, doslovno sam pokušao ovo napraviti prije par dana, patio sam malo i privremeno to ostavio sa strane

Ali imam problem: stranica u Mozille Firefoxu se ne želi poravnati, zalijepi se za lijevi rub i to je to, ništa od navedenog ne pomaže (isto u Operi).

zašto ovo ne radi? - "ako želite postaviti blok ne u odnosu na prozor preglednika, već, na primjer, u odnosu na drugi blok, za ovaj drugi blok trebate postaviti position: relative;"

Hvala vam puno!! samo DIVOVSKO hvala! Bog vas blagoslovio!

Sve je u redu, ali iz nekog razloga sve slike dolaze na svoje mjesto tek nakon ažuriranja preglednika. Molim vas recite mi zašto se to događa?

Andrey, molim te dodaj pretraživanje web stranice.

Dodaj komentar.