Od autora:Želim vam dobrodošlicu nazad na stranice našeg bloga. U današnjem članku želio bih govoriti o različitim tehnikama poravnanja koje se mogu primijeniti na blokove i njihov sadržaj. Konkretno, kako poravnati blokove u css-u, kao i poravnanje teksta.
Poravnajte blokove prema sredini
Lako je centrirati blok u css-u. Ovo je mnogima najpoznatija tehnika, ali o njoj bih prije svega htio govoriti upravo sada. Ovo treba da bude centrirano horizontalno u odnosu na roditeljski element. Kako se to provodi? Recimo da imamo kontejner i naš ispitanik je u njemu:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Pretpostavimo da je ovo zaglavlje stranice. Ne pokriva cijelu širinu prozora i moramo ga centrirati. Pišemo ovako:
#header( širina / max - širina : 800px ; margina : 0 auto ; |
Moramo navesti tačnu ili maksimalnu širinu, a zatim napisati svojstvo ključa - margin: 0 auto. Postavlja margine za naše zaglavlje, prva vrijednost određuje margine odozgo i odozdo, a druga - desno i lijevo. Auto vrijednost nalaže pretraživaču da automatski izračuna padding na obje strane, tako da je element tačno centriran na roditeljskom elementu. Povoljno!
Poravnanje teksta
Ovo je takođe vrlo jednostavan trik. Da biste poravnali sve inline elemente, možete koristiti svojstvo text-align i njegove vrijednosti: lijevo, desno, centar. Potonji centrira tekst, što je ono što želimo. Čak se i slika može poravnati na isti način, jer je i ona po defaultu ugrađeni element.
Poravnajte tekst okomito
Ali ovo je već teže. Podrazumevano, ne postoji tako jednostavno dobro poznato svojstvo koje bi lako centriralo tekst u blok kontejneru okomito. Međutim, postoji nekoliko trikova do kojih su dizajneri izgleda došli tijekom godina.
Postavite visinu bloka koristeći padding. Način je da ne postavite eksplicitnu visinu sa visinom, već je kreirate umjetno s gornjim i donjim paddingima, koji bi trebali biti isti. Kreirajmo bilo koji blok i napišimo mu sljedeća svojstva:
div(pozadina: #ccc; padding: 30px 0; )
div ( pozadina : #ccc; padding : 30px 0 ; |
Pozadina je samo da se vizuelno vide ivice, kao i padding. Sada se visina bloka sastoji od ova dva uvlaka i same linije, a sve to izgleda ovako:
Definirajte visinu linije za blok. Čini mi se da je ovo ispravniji način ako treba poravnati jedan red teksta. Pomoću njega možete snimiti normalnu visinu koristeći svojstvo visine. Nakon toga, također treba podesiti visinu linije, istu kao i visina bloka u cjelini.
div(visina: 60px; visina linije: 60px; )
div ( visina: 60px visina linije: 60px; |
Rezultat će biti sličan gornjoj slici. Sve će raditi čak i ako dodate padding. Međutim, samo za jednu liniju. Ako vam treba više teksta u elementu, onda ova metoda neće raditi.
Pretvorite blok u ćeliju tabele. Suština ove metode je da svojstvo vertical-align: middle djeluje na ćeliju tabele, koja centrira element okomito. Shodno tome, u ovom slučaju, blok mora biti postavljen na sljedeće:
div (prikaz: ćelija-tabela; okomito-poravnanje: sredina; )
div ( displej: tabela - ćelija; vertikalno - poravnati : sredina ; |
Ova metoda je dobra jer možete poravnati koliko god želite teksta u sredini. Ali bolje je postaviti display: table na blok u koji je naš div ugniježđen, inače možda neće raditi.
Pa, dolazimo do posljednjeg trika za danas - ovo je poravnavanje samih blokova okomito. Moramo reći da opet ne postoji nekretnina koja je namijenjena posebno za ovo, ali postoji nekoliko trikova kojih biste trebali biti svjesni.
Postavite pomake u procentima. Ako znate visinu nadređenog elementa i postavite drugi element na nivou bloka unutar njega, možete ga centrirati koristeći procentualni padding. Na primjer, roditelj ima visinu od 600px. U njega stavljate blok koji ima visinu od 300px. Koliko vam je potrebno napraviti sigurnosnu kopiju odozgo i odozdo da biste ga centrirali? 150 piksela svaki, što je 25% visine roditelja.
Ova metoda vam omogućava da izvršite centriranje samo kada vam dimenzije dozvoljavaju proračune. A ako imate roditelj 887 piksela u visinu, onda nećete moći ništa tačno napisati, ovo je već jasno.
Umetnite element u ćeliju tabele. Opet, ako pretvorimo roditeljski element u ćeliju tabele, tada će blok umetnut u nju automatski biti centriran okomito. Da bi to uradio, roditelj samo treba da postavi vertikalno poravnanje: sredinu.
A ako, pored ovoga, napišemo i marginu: 0 auto, tada će element biti centriran horizontalno!
Vrlo često u rasporedu je potrebno centrirati neki element horizontalno i/ili okomito. Stoga sam odlučio napraviti članak sa raznim metodama centriranja, tako da sve bude pri ruci na jednom mjestu.
Horizontalno poravnanje
margina: auto
Horizontalno poravnanje sa marginom se koristi kada je poznata širina centralnog elementa. Radi za blok elemente:
Elem ( margina-lijevo: auto; margin-desno: auto; širina: 50%; )
Navođenje automatske vrijednosti desnog i lijevog dopuna čini ih jednakim, što centrira element horizontalno unutar roditeljskog bloka.
text-align: centar
Ova metoda je prikladna za centriranje teksta unutar bloka. text-align: centar:
Ja sam centriran
pozicija i negativna margina lijevo
Pogodno za centrirane blokove poznate širine. Roditeljski blok postavljamo na poziciju: relativno u odnosu na nju, centralni element na poziciju: apsolutnu, lijevo: 50% i negativnu marginu-left, čija je vrijednost jednaka polovini širine elementa:
Ja sam centriran
prikaz: inline-block + text-align: centar
Metoda je prikladna za poravnavanje blokova nepoznate širine, ali zahtijeva roditeljski omotač. Na primjer, ovako možete centrirati horizontalni meni:
Vertikalno poravnanje
visina linije
Da biste poravnali jedan red teksta, možete koristiti iste vrijednosti visine i razmaka za roditeljski blok. Pogodno za dugmad, stavke menija itd.
Ja sam vertikalno poravnat
pozicija i negativna marža gore
Element se može vertikalno poravnati dajući mu fiksnu visinu i položaj primjene: apsolutna i negativna margina jednaka polovini visine elementa koji se poravnava. Roditeljskom bloku treba dati poziciju: relativno:
Omot (pozicija: relativna; ) elem (visina: 200px; margina: -100px 0 0; pozicija: apsolutna; vrh: 50%; )
Tako, koristeći pozicioniranje i negativne margine, možete centrirati element na stranici.
displej: ćelija tabele
Za vertikalno poravnanje, svojstvo display: table-cell se primenjuje na element, što ga čini da emulira ćeliju tabele. Također postavljamo visinu i vertikalno poravnanje: sredinu na nju. Sve ćemo ovo umotati u kontejner sa svojstvom dislpay: table; :
Ja sam vertikalno poravnat
Dinamički poravnajte element na stranici
Pogledali smo načine za poravnavanje elemenata na stranici pomoću CSS-a. Pogledajmo sada jQuery implementaciju.
Dodajmo 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čunajte i dodijelite koordinate centra stranice lijevom i gornjem CSS svojstvu:
Funkcija alignCenter(elem) ( elem.css(( lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem. height()) / 2 + "px" // ne zaboravite dodati position: absolute elementu da pokrene koordinate )) )
U prvom redu funkcije dobivamo širinu dokumenta i oduzimamo od nje širinu elementa, podijeljenu na pola - to će biti horizontalni centar stranice. Druga linija radi isto, samo sa visinom koja se poravnava okomito.
Funkcija je spremna, ostaje je objesiti na događaje spremnosti DOM-a i promjene veličine prozora:
$(function() ( // pozovite funkciju centriranja kada je DOM spreman alignCenter($(elem)); // pozovite funkciju kada se promijeni veličina prozora $(window).resize(function() ( alignCenter($( elem)); )) // funkcija centriranje elementa funkcija alignCenter(elem) ( elem.css(( // izračunavanje lijeve i gornje koordinate lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem.height()) / 2 + "px" ))) ) ))
Primjena Flexboxa
Nove CSS3 funkcije kao što je Flexbox postepeno dolaze u mainstream. Tehnologija pomaže u kreiranju oznake bez upotrebe plutajućih, pozicioniranja itd. Može se koristiti i za centriranje elemenata. Na primjer, primijenimo Flexbox na roditeljski .wrapper element i centriramo sadržaj unutar:
Omotač ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; visina: 500px; širina: 500px; ) .wrapper .content ( margin: auto; /* margina: 0 auto; samo horizontalno */ /* margina: auto 0; samo okomito */ )
Ovo pravilo istovremeno centrira element horizontalno i okomito - margina sada radi ne samo za horizontalno, već i za vertikalno poravnanje. I bez poznate širine/visine.
Related Resources
Pomozite projektu
Poravnavanje različitih elemenata, poput web stranice ili stranice, u početku je za nekoga težak zadatak, koji mijenja vertikalno poravnanje teksta. Čudno, jedan od najtežih načina korištenja CSS-a je centriranje sadržaja. Horizontalno centriranje sadržaja je relativno lako u nekim vremenskim trenucima. Centriranje sadržaja okomito je gotovo uvijek teško. Centriranje različitog elementa da se vertikalno poravna sa CSS-om. Ovo je svakako vrlo često postavljano pitanje koje stvara probleme dizajnerima i webmasterima. Međutim, postoji mnogo metoda za izvođenje vertikalnog centriranja, a svaka od njih je prilično jednostavna za korištenje.Ako ste to ikada probali, onda je zeznuto, posebno ako želite izbjeći korištenje tablica. Srećom, naši vapaji za pomoć su se čuli, a jedno od novih oružja koje je dodato u CSS arsenal za rješavanje ovog problema je tip rasporeda poznat kao flex box layout. Kao što ćete saznati za nekoliko trenutaka, pruža vam neke zaista sjajne funkcije za pojednostavljenje složenih izgleda. Dio ove sjajne funkcionalnosti također vam omogućava da centrirate svoj sadržaj vertikalno i horizontalno, što ćemo pokriti u ovom vodiču. To možete učiniti s paddingom u određenoj mjeri, ali to može odvesti vaš izgled na manje ekrane. Dodavanje prilagođene CSS klase vašoj tablici stilova znači da možete vertikalno centrirati bilo koji sadržaj za nekoliko sekundi.
Horizontalno poravnanje određuje kako se lijeva i desna ivica pasusa uklapaju između lijeve i desne ivice okvira za tekst. Vertikalno poravnanje određuje vertikalno postavljanje karaktera u tekstualno polje. Nedostatak dobrih načina za vertikalno centriranje elemenata u CSS-u bio je mračna mana u njegovoj reputaciji za skoro čitavo njegovo postojanje.
Prva metoda sa visinom linije
Prva metoda je jednostavna i pomalo banalna, gdje postoje nedostaci koji će biti ograničeni u primjeni. Kada kodirate html stranice za web lokaciju, razmak između redova tekstualnog sadržaja je vjerovatno jedan od atributa koji se obično ostavlja kao zadani. Općenito, moramo postaviti visinu same linije, koja dolazi sa sličnom visinom za blok u kojem se koristi visina linije imovine.
Ovo je prva metoda prikazana u demonstracijama.
css
Constutesim_first(
granica: 2px čvrsta #bf1515;
visina: 175px;
}
.constitutesim_first > p(
line-height:175px;
margin:0;
text-align:center;
padding: 0;
veličina fonta: 17px;
boja: #3152a0;
font-family: Tahoma;
font-weight: bold;
}
Takođe, odmah možete vidjeti kako će sve izgledati u stvarnosti.
Na sličan način moguće je implementirati kako postaviti sliku koja će biti centrirana i bezuslovno okomita. Ovdje ostaje samo registrirati jedno svojstvo vertical-align: sredina; koji je odgovoran za prikazivanje slike.
css
Druga varijacija (
granica: 2px puna crvena;
line-height:158px;
}
Druga varijacija div(
text-align:center;
}
.second-variation img (
vertikalno poravnanje: sredina;
granica: 0px čvrsta #3a3838;
}
Snimke slika implementiramo u sredini i okomito.
Poravnanje sa svojstvom pozicije
Ovo je vjerovatno najpoznatija metoda, ali se najčešće koristi sa CSS-om. Ali ovdje se mora dodati da ni ona nije idealna i ova metoda također ima svoje male nijanse koje su povezane sa središtem elementa, da ako se postavi kao postotak, on će biti centriran na lijevoj strani elementa. gornja strana, unutar samog bloga.
css
Konkurentska opcija (
granica: 2px čvrsta #d40e0e;
visina: 162px;
položaj: relativan;
}
.competaird-option div (
pozicija: apsolutna;
vrh: 50%;
lijevo: 50%
visina: 28%;
širina: 49%
marža: -2% 0 0 -25%;
granica: 2px čvrsta #4a4848;
}
Razmak između redaka ili visina reda je vertikalna visina između redova teksta u renderiranoj HTML stranici. Skoro uvijek, ova vrijednost udaljenosti je postavljena na odgovarajuću vrijednost od strane pretraživača ili mašine za renderiranje. Ova vrijednost obično ovisi o fontu stranice koja se prikazuje i drugim faktorima.
Poravnanje sa svojstvom tabele
U ovoj metodi koristimo provjerenu i staru metodu, gdje elemente prepravljamo u tabelu u kojoj se nalaze ćelije. Što se tiče oznake pod nazivom table, ona se ovde neće koristiti, ovde ćemo postaviti potpuno drugačija svojstva CSS-a, ovo je display: table ;, display: table-cell ;. Ako govorimo o najstarijim verzijama IE-a, onda podaci jednostavno neće biti prikazani ovdje. Nadam se da ste ažurirali svoj pretraživač, jer više nije relevantan i skoro sve se ne prikazuje kako treba.
Cherevert-varijacija (
granica: 2px čvrsta #c30b0b;
visina: 173px;
display:table;
širina: 100%
veličina fonta: 17px;
font-weight: bold;
boja: #3945a0;
}
Cherevert-varijacija div(
display:table-cell;
vertikalno poravnanje: sredina;
text-align:center;
}
Pre svega, da vidimo šta je podrazumevano koje koristi većina pretraživača. U većini modernih dnevnih pretraživača, prored.
Usklađivanje sa svojstvom flex
Ovdje dolazimo do originalnije verzije, koja ima svoja svojstva, koja se rijetko mogu naći u izgledu internetskog izvora. Ali ipak se koriste, da su u nekim slučajevima korisni. Ovo uspostavlja primarnu os, tako da je definicija usmjerenih flex stavki smještena u floppy kontejner.
css
Varijanta-horizontalna (
granica: 2px čvrsta #d20c0c;
visina: 147px;
display:flex;
align-items: centar;
justify-content: centar;
veličina fonta: 18px;
font-weight: bold;
boja: #49518c;
}
Možete odrediti vrijednost za visinu linije baš kao što biste specificirali bilo koju drugu veličinu u css-u, bilo kao broj, veličinu piksela ili kao postotak.
Poravnanje sa svojstvom transformacije
I sada dolazimo do najekstremnije metode, ali ne i najnovije u primjeni u korištenju njegovog web dizajna. Ovdje je sve jednostavno, potrebno je da pomaknete dati element okomito na vrijednost koja vam je potrebna. Nekretnina transformirati, je lista transformacija koje instalater primjenjuje prilikom instaliranja paketa. Postavljač primjenjuje transformacije istim redoslijedom kako su specificirane u svojstvu.
css
vertical-medilpasudsa (
granica: 2px čvrsta #e00a0a;
visina: 158px;
veličina fonta: 19px;
font-weight: bold;
boja: #353c71;
}
.vertical-medilpasudsa > div(
položaj: relativan;
vrh: 50%;
transformacija: translateY(-50%);
text-align:center;
}
Kada unesete vrijednosti kao broj, on će se zasnivati na trenutnoj veličini fonta kao osnovi. Trenutna veličina fonta se množi brojem koji navedete za izračunavanje visine reda ili razmaka između redova.
Ako želite centrirati znakove horizontalno u elementu, morate koristiti text-align: center. Jedna opcija, ako želite da ga centrirate okomito i imate fiksno podnožje zaglavlja i jedan red teksta, postavite visinu reda da bude ista kao i visina vašeg podnožja.
Ako trebate centrirati tekst unutar elementa kao što je div, zaglavlje ili paragraf, možete koristiti CSS svojstvo za poravnavanje teksta.
Text-align ima nekoliko važećih svojstava:
centar: Tekstura je centrirana;
lijevo: Poravnat će se s lijevom stranom kontejnera;
desno: Poravnano na desnu stranu kontejnera
opravdati: Prisiljeno da se poravna i sa lijevom i desnom ivicom kontejnera, osim krajnjih linija;
opravdati sve: Prisiljava krajnji string da opravda znakove;
početak: Isto kao na lijevoj strani, samo ako je smjer s lijeve na desnu stranu. Ali bit će ispravno ako u početku postavite smjer smjera teksta, što će se dogoditi s desna na lijevo;
kraj: Suprotno od početka;
odgovara roditelju: Slično nasljeđivanju, osim za početak i kraj, relativno je u odnosu na roditeljski element;
Koristite ova svojstva da poravnate tekst unutar nadređenog ili omotača div. Ako želite centrirati tekst horizontalno u elementu, morate koristiti text-align: center.
Jedna opcija, ako želite da ga centrirate okomito, ako imate fiksno podnožje zaglavlja i jedan red teksta, postavite visinu reda da bude ista kao i visina vašeg podnožja.
Prilikom postavljanja stranice, često je potrebno izvršiti centralno poravnanje na CSS način: na primjer, centrirati glavni blok. Postoji nekoliko opcija za rješavanje ovog problema, od kojih svaki prije ili kasnije mora koristiti bilo koji layout dizajner.
Centralno poravnanje teksta
Često, u dekorativne svrhe, želite da postavite poravnanje teksta u centar, CSS u ovom slučaju vam omogućava da smanjite vreme rasporeda. Ranije se to radilo pomoću HTML atributa, ali sada standard zahtijeva da se tekst poravna pomoću stilskih tablica. Za razliku od blokova koji moraju mijenjati margine, u CSS-u je poravnanje teksta centrirano jednom linijom:
- text-align:center;
Ovo svojstvo se nasljeđuje i prenosi sa roditelja na svu djecu. 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). Posljednja opcija također vam omogućava promjenu širine i visine elementa, fleksibilnije podešavanje uvlaka.
Često na stranicama, align se pripisuje samoj oznaci. Ovo odmah čini kod nevažećim, jer je W3C zastario atribut align. Ne preporučuje se korištenje na stranici.
Poravnavanje bloka prema sredini
Ako trebate centrirati div, CSS ima prilično zgodan način: 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):
- margin:0 auto;
Sada je ova opcija prepoznata kao apsolutno važeća. Korištenje margina također vam omogućava da postavite poravnanje slike prema sredini: to vam omogućava da riješite mnoge probleme povezane sa pozicioniranjem elementa na stranici.
Poravnajte blok lijevo ili desno
Ponekad centriranje na CSS način nije potrebno, ali morate staviti dva bloka jedan pored drugog: jedan na lijevoj ivici, drugi na desnoj. Da biste to učinili, postoji svojstvo float, koje može imati jednu od tri vrijednosti: lijevo, desno ili nijedna. Recimo da imate dva bloka koja treba postaviti jedan pored drugog. Tada će kod biti ovakav:
- .left (float:left;)
- .desno (float:desno)
Ako postoji i treći blok, koji bi trebao biti lociran ispod prva dva bloka (na primjer, podnožje), onda treba postaviti svojstvo clear:
- .left (float:left;)
- .desno (float:desno)
- podnožje (jasno: oba)
Činjenica je da blokovi sa klasama lijevo i desno ispadaju iz opšteg toka, odnosno svi ostali elementi zanemaruju samo postojanje poravnatih elemenata. Svojstvo clear:both omogućava podnožju ili bilo kojem drugom bloku da vidi elemente koji su ispali iz toka i onemogućuje premotavanje (float) i lijevo i desno. Stoga će se u našem primjeru podnožje pomjeriti prema dolje.
Vertikalno poravnanje
Postoje slučajevi kada nije dovoljno postaviti centralno poravnanje na CSS načine, potrebno je i promijeniti vertikalnu poziciju podređenog bloka. Bilo koji inline ili inline-blok element može biti u ravnini s gornjom ili donjom ivicom, biti u sredini roditeljskog elementa ili biti u proizvoljnom položaju. Najčešće, blok treba centrirati, što se radi pomoću atributa vertical-align. Recimo da postoje dva bloka, jedan ugniježđen u drugi. U ovom slučaju, unutrašnji blok je inline-block element (prikaz: inline-block). Morate poravnati dječji blok okomito:
- gornje poravnanje - .child(vertical-align:top);
- centralno poravnanje - .child(vertical-align:middle);
- donje poravnanje - .child(vertical-align:bottom);
Na elemente na nivou bloka ne utiče text-align ili vertical-align.
Mogući problemi sa poravnatim blokovima
Ponekad centriranje diva 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 leže u prvom. Element s klasom second je poravnat lijevo, a posljednji blok je poravnat desno. Nakon poravnanja, oba su ispala iz toka. Ako roditeljski element nema postavljenu visinu (na primjer, 30em), tada se više neće protezati do visine podređenih blokova. Da bi izbjegli ovu grešku, koriste "spacer" - poseban blok koji vidi .second i .third. CSS kod:
- .second (float:left)
- .third (float:desno)
- .clearfix(visina:0; jasno: oba;)
Često se koristi pseudo-klasa :after, koja vam takođe omogućava da vratite blokove na svoje mesto kreiranjem pseudo odstojnika (u primeru, div sa klasom kontejnera leži unutar .first i sadrži .left i .right):
- .left(float:left)
- .desno (float:desno)
- .container:after(content:""; display:table; clear:oth;)
Gore navedene opcije su najčešće, iako postoji nekoliko varijacija. Eksperimentiranjem uvijek možete pronaći najlakši i najprikladniji način da napravite pseudo odstojnik.
Još jedan problem sa kojim se dizajneri rasporeda često suočavaju je poravnanje inline-blok elemenata. Nakon svakog od njih automatski se dodaje razmak. Svojstvo margine, koje je postavljeno na negativnu marginu, pomaže da se nosi sa ovim. Postoje i drugi načini koji se koriste mnogo rjeđe: na primjer, nuliranje U ovom slučaju, font-size:0 je upisan 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, font-size:1em. Metoda nije uvijek prikladna, pa se mnogo češće koristi opcija s vanjskim uvlakama.
Poravnavanje blokova omogućava vam da kreirate prekrasne i funkcionalne stranice: ovo je izgled općeg izgleda, lokacija robe u internetskim trgovinama i fotografije na web stranici vizitkarte.
Problem vertikalnog centriranja elemenata u CSS-u ima niz gotovih rješenja. Izbor metode poravnanja u svakom pojedinačnom slučaju ovisi o vrsti, veličini, pozicioniranju elemenata i drugim osobinama koje oni specificiraju.
Ispod su tehnike vertikalnog poravnanja popularne među dizajnerima izgleda. Pokazuje kako rade i za koje je slučajeve svaki od njih najprikladniji.
Evo dva elementa div:
Svaka metoda će se koristiti za poravnavanje unutrašnje jedinice sa središtem vanjske jedinice.
line-height za jedan red
Kada roditelj obuhvata jedan red teksta i visina djeteta je poznata, može se primijeniti svojstvo visine reda. Vrijednost svojstva mora biti jednaka visini vanjskog okvira. Ovo radi samo za jedan red, tako da je dobro da dijete doda overflow: hidden i white-space: nowrap da spriječi prelamanje reda.
Nećete moći da koristite line-height=100% kao procenat, jer je 100% u ovom slučaju visina fonta.
Kontejner (
visina: 300px;
visina linije: 300px
}
Unutrašnji(
razmak: nowrap;
overflow: skriveno;
}
Metoda je primjenjiva samo kada je poznata visina vanjskog bloka.
Tablica sa vertikalnim poravnanjem
Tablica je najbolji način za vertikalno poravnavanje elemenata. Kako se ne bi narušila semantika, bolje je kreirati elemente tablice koristeći CSS. Položaj sadržaja ćelije kontrolira se pomoću vertikalnog poravnanja. Četiri vrijednosti ovog svojstva rade u tabelama:
osnovna linija - podrazumevano;
. dno - sadržaj na dnu ćelije;
. sredina - sadržaj u sredini ćelije;
. vrh - sadržaj na vrhu ćelije.
U prvom primjeru, usamljena ćelija tablice postaje vanjski blok.
Kontejner (
display:table-cell;
vertikalno poravnanje: sredina;
}
Metoda je dobra jer radi za elemente bez određene visine, ali u nekim slučajevima njenu upotrebu ometa činjenica da vanjski blok, kao i svaka ćelija tablice, prilagođava svoju širinu svom sadržaju, a možete ga rastegnuti samo postavljanjem širina za širinu eksplicitno. Za ćeliju bez tabele, procenti ne rade adekvatno.
Ovaj nedostatak se ispravlja premotavanjem ćelije u nadređenu sa svojstvom display:table. Ovaj element se može odrediti u procentima. Konačni kod će izgledati ovako:
Vanjski omot (
display:table;
}
Kontejner (
display:table-cell;
vertikalno poravnanje: sredina;
}
Pozicija: apsolutna + negativna margina
Metoda se koristi kada je poznata visina unutrašnjeg elementa. Za vanjski blok, može biti nepoznat. Roditelju se daje relativna pozicija, a dijete unutar njega je apsolutno.
Najviša vrijednost svojstva od 50% uzrokuje da ugniježđeni element bude pozicioniran najviše u sredini vanjskog okvira. Ostaje da ga podignemo sa negativnom marginom-vrhom za polovinu sopstvene visine tako da stoji tačno u sredini vertikale.
Kontejner (
položaj: relativan;
}
Unutrašnji(
visina: 140px;
pozicija: apsolutna;
vrh: 50%;
margin-top: -70px;
}
Nedostatak ove metode je potreba da se zna visina djeteta.
Inline poravnanje sa vertikalnim poravnanjem
Poravnavanje inline i inline-block elemenata, uključujući slike i ikone, u njihovom okolnom tekstu se vrši pomoću svojstva vertikalno poravnanje. Za razliku od tablice, u ovom slučaju radi cijeli skup njegovih vrijednosti navedenih u specifikaciji.
S obzirom na visinu nadređenog, ovo svojstvo se može koristiti za centriranje teksta u više redaka.
Za vanjski blok propisano je centriranje jedne linije.
Kontejner (
visina: 140px;
visina linije: 140px;
}
Vrijednost visine linije za unutrašnji blok je poništena na normalnu ili bilo koju vrijednost koju želite. Također mu je dato poravnanje vertikalno-poravnanje: sredina i konverzija u inline-block tip - prikaz: inline-block.
Unutrašnji(
prikaz: inline-block
visina linije: normalna
vertikalno poravnanje: sredina;
}
Nedostatak ove metode je što morate znati visinu roditelja.
Poravnanje sa transformacijom
Funkcija translateY svojstva transformacije omogućava vam da centrirate unutrašnji okvir nepoznate visine. Da biste to učinili, roditelj mora biti pozicioniran relativno, a dijete mora biti postavljeno apsolutno.
Svojstvo vrha sa vrijednošću od 50% spušta unutrašnju kutiju tako da je njena gornja ivica u sredini nadređene. Vrijednost translateY: -50% podiže element za polovinu njegove vlastite visine i tako poravnava vertikalne centre kutija.
Kontejner (
položaj: relativan;
}
Unutrašnji(
pozicija: apsolutna;
vrh: 50%;
transformacija: translateY(-50%);
}
Nedostatak prijema je ograničena podrška za funkcije transformacije od strane IE pretraživača.
Poravnanje preko pseudo-elementa
Metoda radi kada je visina nepoznata ni za prvi ni za drugi blok. Inline pseudo-element inline-block se dodaje unutar roditelja koristeći prije ili poslije . Visina dodanog elementa mora biti jednaka visini nadređenog - visina: 100%. Vertikalno poravnanje sadržaja je postavljeno sa vertical-align: middle.
Vertical-align: sredina poravnava unutrašnji blok u odnosu na ovaj pseudo-element. Pošto su roditelj i dete iste visine, unutrašnji element, iako je vertikalno poravnat sa pseudo-elementom, takođe je centriran sa spoljnom kutijom.
Kontejner:prije (
sadržaj: "";
visina: 100%;
vertikalno poravnanje: sredina;
prikaz: inline-block
}
Unutrašnji(
prikaz: inline-block
vertikalno poravnanje: sredina;
}
Univerzalni način. Ne radi ako je unutrašnji blok postavljen na apsolutno pozicioniranje.
Flexbox
Najnoviji i najlakši način za vertikalno poravnavanje elemenata. Flexbox vam omogućava da rasporedite elemente web stranice na bilo koji način koji želite. Da centrirate blok, samo postavite roditelja na display: flex i dijete na margin: auto.
Kontejner (
display:flex;
širina: 320px
visina: 140px;
}
Unutrašnji(
širina: 120px
margina: auto;
}
Flexbox radi samo u modernim pretraživačima.
Izbor metode
Koju tehniku vertikalnog poravnanja koristiti ovisi o zadatku i ograničenjima koja mogu biti prisutna u svakom konkretnom slučaju.
Visina elemenata nije poznata
U ovoj situaciji možete koristiti jednu od četiri univerzalne metode:
1. Tabela. Roditelj je ćelija tabele kreirana u HTML-u ili preko display-table/display-cell. Ovom roditeljskom elementu je dato vertikalno poravnanje: sredina.
2. Pseudo-element. Za vanjski blok, inline-blok pseudo-element je kreiran sa širinom=100% i vertikalnim poravnanjem: sredinom. Djetetu se daje prikaz: inline-block i vertikalno-align: sredina. Metoda ne radi samo kada se unutrašnjem bloku daje apsolutno pozicioniranje.
3. Transformacija. Roditelj dobija poziciju: relativna. Djetetu se daje položaj: apsolutni, gornji: 50% i transformacija: translateY(-50%);
4 Flexbox. Vanjski blok je postavljen na display: flex, unutrašnji blok je postavljen na margin: auto.
Poznata je samo visina djeteta
Vanjski blok je relativno pozicioniran; unutrašnjem elementu je dato apsolutno pozicioniranje, vrh: 50% i margin-top jednak polovini njegove visine.
Jedna linija po bloku sa poznatom visinom
Vanjski okvir je postavljen na svojstvo visine linije sa vrijednošću jednakom njegovoj visini.
Visina vanjskog bloka je poznata, ali unutrašnjeg elementa nije.
Roditelju je data visina linije jednaka njegovoj visini. Visina linije djeteta je redefinirana na normalnu ili bilo koju vrijednost koju želite, i daje joj se prikaz: inline-block i vertical-align: middle.
