U procesu izgleda web stranica, zadatak centriranja blokova je prilično čest. To može biti i okomito i horizontalno centriranje.
Na primjer, ako web-mjesto ima fiksnu širinu, onda bi ga bilo racionalno poravnati sa središtem prozora preglednika, jer to čini tekst lakšim za čitanje (osobito ako je monitor velik). Neki dizajni općenito pretpostavljaju položaj bloka u središtu prozora preglednika, tj. istovremeno okomito i horizontalno centriranje.
Prvo, razgovarajmo o horizontalnom centriranju. Najpopularnija tehnika je kada se blok centrira postavljanjem desne i lijeve dimenzije. margina na "auto"... Recimo da želimo centrirati blok s id = "kontejner" širine 860px. U ovom slučaju, u CSS datoteci morate napisati:
#kontejner (
boja pozadine: #EEE;
širina: 860px;
margina: 0px auto;
}
Međutim, I.E. starije verzije (5.0 na primjer) neće centrirati ovaj blok. Naravno, nitko više ne koristi tako drevne preglednike (od 1800 mojih dnevnih posjetitelja - samo 1), ali za svaki slučaj je bolje da i tamo radi :)
Da biste to učinili, roditeljski element, odnosno onaj unutar kojeg centriramo naš blok (obično je roditeljski element oznaka BODY), trebate postaviti parametar poravnavanje teksta: središte... U ovom slučaju, blok će biti poravnat u sredini, međutim, sav njegov sadržaj će također biti poravnat u sredini, a to nam ne treba. Stoga, unutar ovog bloka postavljamo zadano poravnanje - poravnavanje teksta: lijevo .
tijelo (poravnanje teksta: središte)
#kontejner (
boja pozadine: #EEE;
širina: 860px;
margina: 0px auto;
poravnavanje teksta: lijevo;
}
Postoji i drugi način horizontalnog poravnanja bloka na temelju. Kao što vjerojatno znate, prema zadanim postavkama, bilo koji element na razini bloka sjedne na lijevi rub roditeljskog elementa. Stoga, da biste ga poravnali sa središtem, trebate:
2. Pomaknite ga udesno za 50% širine prozora preglednika
3. Koristeći negativnu marginu, pomaknite je ulijevo za udaljenost jednaku polovici širine bloka.
Ovo će postaviti blok u sredinu. Za više jasnoće pogledajte video 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 morate postaviti položaj: relativan;
Pretpostavimo da naš #container blok koji treba biti centriran leži unutar #wrap bloka. Tada će kod izgledati ovako:
#wrap (položaj: relativan)
#kontejner (
boja pozadine: # 559964;
pozicija: apsolutna;
lijevo: 50%;
margin-left: -430px;
širina: 860px;
}
Pogledajmo sada slučaj kada trebate poravnati blok sa središtem stranice, t.j. primijeniti horizontalno i vertikalno centriranje u isto vrijeme. Ovdje je opet primjenjivo pozicioniranje. Dakle, trebamo:
1. Dajte bloku 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 marginu, pomaknite je prema gore za udaljenost jednaku polovici visine bloka, a 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.
Komentari:
Ja ću biti prvi koji će gledati lekciju !!!
Eh ... Drugo =) Nedavno sam naišao na ovaj problem u IE-u, patio sam dugo vremena)) Hvala =)
Hvala, označena stranica)))
Hvala puno, Andrej, na novim lekcijama!
Samo hvala, mislim da se ovdje nema što dodati))
Hvala na lekciji, prije par dana sam to pokušao napraviti, malo sam patio i privremeno odgođen
I imam problem: stranica u Mozille Firefoxu se ne želi poravnati, zapela za lijevi rub i to je to, ništa od navedenog ne pomaže (isto u Operi).
zašto ne radi? - "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 položaj: relativno;"
Hvala ti puno!!samo OGROMNO hvala!Neka ti Bog da zdravlje!
Sve je u redu, ali iz nekog razloga sve slike dolaze na svoje mjesto tek nakon ažuriranja preglednika. Molim te reci mi, zašto se to događa?
Andrej, molim te dodaj pretragu na stranici.
Dodaj komentar.
Mislim da su mnogi od vas koji ste radili layout naišli na potrebu za vertikalnim poravnavanjem elemenata i znaju kakve poteškoće nastaju pri poravnavanju elementa prema sredini.
Da, za okomito poravnanje, CSS ima posebno svojstvo vertikalnog poravnanja s više vrijednosti. U praksi, međutim, uopće ne funkcionira kako se očekivalo. Pokušajmo to shvatiti.
Usporedimo sljedeće pristupe. Poravnaj sa:
- stolovi,
- uvlake,
- visina linije,
- istezanje,
- negativna marža,
- transformirati,
- pseudo-element,
- flexbox.
Postoje dva diva, s jednim ugniježđenim unutar drugog. Dajmo im odgovarajuće klase – vanjske i unutarnje.
Izazov je poravnati unutarnji element sa središtem vanjskog elementa.
Prvo, razmotrite slučaj kada su dimenzije vanjske i unutarnje jedinice znan... Unutarnjem elementu dodajmo display: inline-block, a vanjskom elementu text-align: center i vertical-align: middle.
Sjećam se da se poravnanje odnosi samo na elemente koji imaju inline ili inline-blok način prikaza.
Dajmo blokovima veličine i boje pozadine da vidimo njihove granice.
Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnanje: sredina; boja pozadine: #ffc;) .unutarnji (zaslon: 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? Poanta je da svojstvo vertical-align utječe na poravnanje. sam element, a ne njegov sadržaj(osim kada se odnosi 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 u odnosu na susjedne blokove, a u našem slučaju imamo jedan inline blok.
Postoji nekoliko tehnika za rješavanje ovog problema. U nastavku ćemo pobliže pogledati svaki od njih.
Poravnajte sa stolom
Prvo rješenje koje vam pada na pamet je zamijeniti vanjski blok stolicom s jednom stanicom. U tom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno 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 stvaranje 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č (zaslon: stol;) .vanjski (zaslon: ćelija tablice;)
Ipak, vanjski blok će i dalje ostati stol sa svim posljedicama koje iz toga proizlaze.
Poravnajte s uvlakama
Ako su poznate visine unutarnjeg i vanjskog okvira, tada se poravnanje može postaviti pomoću okomitog podstavka unutarnjeg okvira pomoću formule: (H vanjski - H unutarnji) / 2.Vanjski (visina: 200px;) .unutarnji (visina: 100px; margina: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/
Loša strana rješenja je što je primjenjivo samo u ograničenom broju slučajeva kada su poznate visine oba bloka.
Poravnavanje s visinom linije
Ako znate da unutarnji blok ne smije zauzimati više od jednog retka teksta, tada možete koristiti svojstvo visine reda 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/
Ovu tehniku možete koristiti i za poravnavanje teksta s više redaka tako što ćete redefinirati vrijednost visine retka za unutarnji blok i dodati display: inline-block i vertical-align: srednja pravila.
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 poravnanje
Ova metoda se može koristiti kada je visina vanjske jedinice nepoznata, ali je visina unutarnje jedinice poznata.Za ovo vam je potrebno:
- postaviti relativni položaj vanjskog bloka, a unutarnjeg - apsolutno;
- unutarnjem bloku dodajte pravila top: 0 i bottom: 0, zbog čega se proteže na punu visinu vanjskog bloka;
- postavljeno na auto za okomiti padding unutarnjeg bloka.
http://jsfiddle.net/c1bgfffq/4/
Bit ove tehnike je da određivanje visine za rastegnuti i apsolutno pozicionirani okvir prisiljava preglednik da izračuna okomite margine u jednakim omjerima kada je postavljeno na automatski.
Poravnavanje 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 bloka.Morate postaviti relativni položaj vanjskog bloka, a unutarnjeg - apsolutno. Zatim morate gurnuti unutarnju kutiju prema dolje do polovice visine gornje strane vanjske kutije: 50% i podići je do polovice njezine vlastite visine margin-top: -H unutarnja / 2.
Vanjski (položaj: relativan;) .unutarnji (visina: 100px; položaj: apsolutni; 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 unutarnje jedinice nepoznata. U ovom slučaju, umjesto postavljanja negativnog dodavanja piksela, možete koristiti svojstvo transformacije i pomaknuti unutarnji blok 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 se postotak nije mogao postaviti u prethodnoj metodi? Budući da su postotne vrijednosti svojstva margine izračunate u odnosu na roditelj, 50% bi bilo polovica visine vanjskog okvira, a morali smo podići unutarnji okvir za polovicu njegove vlastite visine. Svojstvo transformacije je pravo za ovo.
Nedostatak ove metode je što se ne može primijeniti ako unutarnji blok ima apsolutno pozicioniranje.
Poravnajte 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 kako želite. Poravnanje po sredini za Flexbox vrlo je jednostavan zadatak.Vanjski okvir treba postaviti na display: flex, a unutarnji okvir 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 (poput ikona), negativno svojstvo margin-top je idealno.
- Za složenije slučajeve, kada je visina bloka nepoznata, trebate koristiti pseudoelement ili svojstvo transformacije.
- Pa, ako ste te sreće da ne trebate podržavati starije verzije IE-a, onda je naravno bolje koristiti Flexbox.
Dizajner ponekad ima pitanje: kako centrirati elemente okomito? I to uzrokuje određene probleme. Međutim, postoji nekoliko metoda za centriranje elemenata okomito, a svaka od ovih metoda je prilično jednostavna. Ovaj članak opisuje neke od ovih metoda.
Da biste vidjeli svaku metodu u akciji, kliknite na demo gumb ili na sliku.
Razmotrimo neke od problema koji ometaju vertikalno centriranje.
Vertikalno poravnanje
Horizontalno centriranje elementa prilično je lako implementirati (koristeći CSS). Umetnuti element može se centrirati vodoravno dodjeljivanjem svojstva text-align roditeljskom spremniku s vrijednošću centra. Kada je element element na razini bloka, samo treba postaviti svoju širinu i postaviti margine desne i lijeve (margin-lijeve) margine na automatski kako bi se centrirao.
Što se tiče teksta, mnogi počinju koristiti svojstvo vertical-align za centriranje. Ovo je logično i moj prvi izbor bi bio isti. Atribut valign može se koristiti za centriranje elementa u tablici.
Međutim, atribut valign radi samo na ćeliji (na primjer). CSS svojstvo vertikalnog poravnanja može se primijeniti na ćeliju i neke umetnute elemente.
- Tekst je centriran u odnosu na visinu reda.
- Što se tiče tablice, ne ulazeći u detalje, centriranje se događa u odnosu na visinu reda.
Nažalost, svojstvo vertical-align ne može se primijeniti na elemente na razini bloka kao što je paragraf (p) unutar oznake div.
Međutim, postoje i druge metode za centriranje elemenata okomito, a i dalje možete koristiti svojstvo vertical-align gdje je potrebno. Koju ćete metodu koristiti ovisi o tome što namjeravate centrirati.
Razmak između redaka ili visina reda
Ovu metodu treba koristiti samo kada trebate centrirati redak teksta. Za to je potrebno da element koji sadrži tekst postavi visinu reda (razmak) veću od veličine fonta.
Prema zadanim postavkama, postoji jednak prostor iznad i ispod teksta, tako da je tekst okomito centriran.
U tom slučaju nije potrebno specificirati visinu nadređenog elementa.
#dijete (visina linije: 200px;)
Ova metoda radi u svim preglednicima, ali ne zaboravite je 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 horizontalnih 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. Roditeljski element mora biti predstavljen kao tablica, podređeni element mora biti označen kao ćelija i na njega primjenjujemo svojstvo vertical-align sa sredinom vrijednosti. Na ovaj način, svaki sadržaj u podređenom elementu bit će okomito centriran. CSS kod je dat u nastavku.
#roditelj (prikaz: stol;) #dijete (prikaz: ćelija-tablica; okomito poravnanje: sredina;)
Nažalost, ova metoda ne radi u starijim verzijama IE preglednika. Ako vam je potrebna podrška preglednika za IE6 i niže, dodajte deklaraciju display: inline-block u podređeni element.
#child (prikaz: inline-block;)
Apsolutno pozicioniranje i negativna margina
Ova metoda je za elemente na razini bloka i radi u svim preglednicima. Potrebno je postaviti visinu elementa koji se centrira.
Ispod je kod u kojem je dijete centrirano 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%;)
Prvo morate postaviti roditelje i dijete. Zatim postavljamo pomak djeteta na 50% u odnosu na vrh (vrh) i lijevo (lijevo) roditeljskog elementa, čime se dijete centrira u odnosu na roditelja. No, naše manipulacije će gornji desni kut djeteta smjestiti u središte roditelja, što nam naravno ne odgovara.
Naš zadatak je pomicati dijete gore i lijevo, u odnosu na roditelja, tako da je dijete vizualno centrirano okomito i vodoravno. Zbog toga morate znati visinu i širinu djeteta.
Dakle, trebali bismo djetetu dati negativnu gornju i lijevu marginu jednaku polovici, odnosno širini i visini djeteta.
Za razliku od prve dvije metode, ova metoda je namijenjena elementima 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 djeteta
Kao i kod prethodne metode, roditelj i dijete su pozicionirani relativno, odnosno apsolutno.
U CSS kodu centriram dijete i okomito i vodoravno, no možete koristiti samo okomito centriranje.
#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 da podređeni element možete pozicionirati koristeći vrijednosti svojstava gornjeg, lijevog, desnog i donjeg dna jednake 0. Budući da je naš podređeni element manji od roditeljskog elementa, ne može se "zalijepiti" za roditeljski element.
Vrijednosti margine za sve četiri strane djeteta su nula, tako da je element okomito centriran 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.
Donji i gornji padding su jednaki
U ovoj metodi izričito dajemo roditeljskom elementu jednak padding (donji i gornji) tako da je dijete vizualno centrirano okomito.
#roditelj (ispun: 5% 0;) #dijete (ispun: 10% 0;)
Koristim relativne veličine. Ako su veličine blokova fiksne, tada će se morati napraviti neki matematički izračuni.
Na primjer, ako roditeljski element ima visinu od 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 blok koji kontrolira okomiti položaj djeteta. Plutajući div treba postaviti ispred djeteta, pogledajte HTML kod u nastavku.
#parent (visina: 250px;) #floater (float: lijevo; visina: 50%; širina: 100%; margin-bottom: -50px;) #child (čisto: oboje; visina: 100px;)
Prvo, gurnemo plutajuću kutiju ulijevo (ili udesno) i damo mu visinu od 50% od njegovog roditelja. Na ovaj način, plutajuća kutija ispunit će gornju polovicu roditelja.
Budući da je blok plutajući, uklanja se iz općeg toka dokumenta, stoga bi se podređenom bloku trebalo dodijeliti svojstvo clear s vrijednošću oba. Postavio sam vrijednost na obje, međutim, možete koristiti vrijednost koja odgovara smjeru pozicioniranja plutajućeg elementa.
Gornji rub djeteta sada leži izravno ispod donjeg ruba plutajućeg elementa. Želimo podići dijete za polovicu visine plovka. 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 vam je potreban prazan blok i morate znati visinu podređenog elementa.
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:
Postavljen sam po sredini
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:
Postavljen sam po sredini
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:
Vertikalno poravnanje
linija-visina
Da biste poravnali jedan redak teksta, možete koristiti istu visinu i razmak između redaka za roditeljski blok. Prikladno za gumbe, stavke izbornika i još mnogo toga.
Ja sam okomito poravnat
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; :
Ja sam okomito poravnat
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čunavanje lijeve i gornje 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 istovremeno centrira element vodoravno i okomito - margina sada radi ne samo za vodoravno, već i za okomito poravnanje. I bez poznate širine/visine.
Povezani resursi
Pomozite projektu
Prilikom postavljanja stranice, često je potrebno izvesti središnje poravnanje na CSS način: na primjer, centrirati glavni blok. Postoji nekoliko opcija za rješavanje ovog problema, a svaku od njih prije ili kasnije mora koristiti bilo koji dizajner izgleda.
Poravnajte tekst po sredini
Često, u dekorativne svrhe, morate postaviti poravnanje teksta u središte, CSS u ovom slučaju omogućuje vam da smanjite vrijeme pisanja. Prije se to radilo pomoću HTML atributa, ali sada standard zahtijeva poravnavanje teksta pomoću stilskih tablica. Za razliku od okvira, za koje morate promijeniti margine, u CSS-u se središnje poravnanje teksta vrši jednim redom:
- poravnavanje teksta: središte;
Ovo svojstvo se nasljeđuje i prenosi s roditelja na sve potomke. Utječe ne samo na tekst, već i na druge elemente. Da biste to učinili, moraju biti inline (na primjer, span) ili inline-block (bilo koji blokovi koji imaju postavljeno svojstvo display: block). Potonja opcija također vam omogućuje promjenu širine i visine elementa, fleksibilnije podešavanje uvlaka.
Često se na stranicama align pripisuje samoj oznaci. To odmah čini kod nevažećim, jer je atribut align zastario W3C. Ne preporučuje se korištenje na stranici.
Poravnavanje bloka prema sredini
Ako trebate postaviti div da bude centriran, CSS može ponuditi prilično zgodan način za to: korištenje margina. Uvlake se mogu postaviti i za blok elemente i za inline-blok elemente. Vrijednost svojstva mora imati vrijednosti 0 (vertikalne uvlake) i auto (automatske horizontalne uvlake):
- margina: 0 auto;
Sada je ova konkretna opcija prepoznata kao apsolutno valjana. Upotreba vanjskih uvlaka također vam omogućuje da postavite središnje poravnanje slike: to vam omogućuje rješavanje mnogih problema povezanih s pozicioniranjem elementa na stranici.
Poravnajte blok lijevo ili desno
Ponekad CSS-centrirano poravnanje nije potrebno, ali trebate postaviti dva bloka jedan pored drugog: jedan s lijeve strane, drugi s desne strane. Da biste to učinili, postoji svojstvo float, koje može imati jednu od tri vrijednosti: lijevo, desno ili nijednu. Recimo da imate dva bloka koja treba postaviti jedan pored drugog. Tada će kod biti ovakav:
- .lijevo (float: lijevo;)
- .desno (plutajući: desno)
Ako postoji i treći blok koji bi se trebao nalaziti ispod prva dva bloka (na primjer, podnožje), tada treba registrirati svojstvo clear:
- .lijevo (float: lijevo;)
- .desno (plutajući: desno)
- podnožje (čisto: oboje)
Činjenica je da blokovi s klasama lijevo i desno ispadaju iz općeg toka, odnosno svi ostali elementi zanemaruju samo postojanje usklađenih elemenata. Jasno: oba svojstva dopuštaju podnožju ili bilo kojem drugom bloku da vidi elemente izvan protoka i onemogućuje plutanje lijevo i desno. Stoga će se u našem primjeru podnožje pomaknuti prema dolje.
Vertikalno poravnanje
Postoje slučajevi kada nije dovoljno postaviti središnje poravnanje pomoću CSS metoda, također morate promijeniti okomiti položaj podređenog bloka. Bilo koji inline ili inline-blok element može se prikvačiti na gornji ili donji rub, u sredinu nadređenog elementa ili bilo gdje. Najčešće je potrebno poravnanje bloka u sredini, za to se koristi atribut vertikalno poravnanje. Recimo da postoje dva bloka, jedan ugniježđen u drugi. U ovom slučaju, unutarnji blok je inline-block element (prikaz: inline-block). Morate okomito poravnati podređeni blok:
- gornje poravnanje - .dijete (vertical-align: top);
- poravnanje po sredini - .dijete (vertical-align: middle);
- poravnanje dna - .dijete (vertical-align: bottom);
Ni text-align ni vertikalno-align ne utječu na blok elemente.
Mogući problemi s poravnatim blokovima
Ponekad poravnavanje diva sa središtem na CSS način može uzrokovati male probleme. Na primjer, kada koristite float: recimo da postoje tri bloka: .first, .second i .third. Drugi i treći blok su u prvom. Element s drugom klasom je poravnat lijevo, a posljednji blok je poravnat udesno. Nakon poravnanja, oboje su ispali iz toka. Ako roditeljski element nema određenu visinu (na primjer, 30em), tada će se prestati rastezati po visini podređenih blokova. Da biste izbjegli ovu pogrešku, koristite "razmaknicu" - poseban blok koji vidi .second i .third. CSS kod:
- .second (float: lijevo)
- .third (float: desno)
- .clearfix (visina: 0; jasno: oboje;)
Često se koristi pseudo-klasa: after, koja vam također omogućuje vraćanje blokova na mjesto stvaranjem pseudo-izgleda (u primjeru, div s klasom kontejnera nalazi se unutar .first i sadrži .left i .right):
- .lijevo (float: lijevo)
- .desno (plutajući: desno)
- .kontejner: poslije (sadržaj: ""; prikaz: tablica; jasno: oboje;)
Gore navedene opcije su najčešće, iako postoji nekoliko varijacija. Uvijek možete pronaći najlakši i najprikladniji način za stvaranje pseudo-izgleda kroz eksperimentiranje.
Drugi problem s kojim se dizajneri izgleda često susreću je poravnanje inline-blok elemenata. Nakon svakog od njih automatski se dodaje razmak. Svojstvo margine pomaže u rješavanju ovoga, koje je postavljeno na negativnu maržu. Postoje i druge metode koje se koriste mnogo rjeđe: na primjer, nuliranje U ovom slučaju, veličina fonta: 0 upisana je u svojstva roditeljskog elementa. Ako unutar blokova postoji tekst, tada je potrebna veličina fonta već vraćena u svojstvima elemenata inline-bloka. Na primjer, veličina fonta: 1em. Metoda nije uvijek prikladna, stoga se mnogo češće koristi opcija s vanjskim uvlakama.
Poravnavanje blokova omogućuje vam stvaranje lijepih i funkcionalnih stranica: ovo je izgled općeg izgleda, i lokacija robe u internetskim trgovinama i fotografije na web-mjestu posjetnica.
