Ako ste to ikada probali, teško je, pogotovo ako želite izbjeći korištenje tablica. Srećom, čuli su se naši vapaji za pomoć, a jedno od novih oružja dodanih CSS arsenalu za rješavanje ovog problema je vrsta izgleda poznata kao fleksibilni raspored okvira. Kao što ćete saznati za nekoliko trenutaka, pruža vam neke stvarno izvrsne značajke za pojednostavljenje složenih izgleda. Neke od ovih izvrsnih funkcija također vam omogućuju centriranje vašeg sadržaja okomito i vodoravno, a to je ono što ćemo obraditi u ovom vodiču. To možete učiniti s ispunom do neke mjere, ali to može dovesti vaš izgled na manje zaslone. Dodavanje prilagođene CSS klase vašoj tablici stilova znači da možete okomito centrirati bilo koji sadržaj u nekoliko sekundi.
Horizontalno poravnanje određuje kako se lijevi i desni rubovi odlomka postavljaju između lijevog i desnog ruba tekstnog okvira. Okomito poravnanje određuje okomiti položaj znaka u tekstualnom polju. Nedostatak dobrih načina okomitog centriranja elemenata u CSS-u bila je mračna mana u njegovoj reputaciji gotovo cijelo vrijeme postojanja.
Prva metoda s visinom linije
Prva metoda je jednostavna i pomalo banalna, ali ima svoje nedostatke koji će ograničiti njezinu upotrebu. Prilikom kodiranja html stranica za web mjesto, prored tekstualnog sadržaja vjerojatno je jedan od atributa koji se obično ostavlja zadanim. Općenito, moramo postaviti visinu same linije, koja dolazi sa sličnom visinom za blok u kojem se koristi linija-visina vlasništvo.
Ovo je prva metoda prikazana u demonstracijama
CSS
Constutesim_prvi(
rub: 2px solid #bf1515;
visina: 175px;
}
.constutesim_first > p(
line-height:175px;
margina:0;
poravnanje teksta: središte;
ispuna: 0;
veličina fonta: 17px;
boja: #3152a0;
obitelj-fontova: Tahoma;
font-weight: bold;
}
Također možete odmah vidjeti kako će sve izgledati u stvarnosti.
Sličnom metodom moguće je shvatiti kako postaviti sliku koja će biti u središtu i svakako okomita. Ovdje ostaje samo navesti jedno svojstvo: vertical-align: middle; koji je odgovoran za prikaz slike.
CSS
Druga varijacija (
rub: 2px puna crvena;
line-height:158px;
}
Druga varijacija div(
poravnanje teksta: središte;
}
.druga varijacija img (
okomito poravnanje: sredina;
rub: 0px solid #3a3838;
}
Implementiramo centrirane i okomite snimke slika.
Usklađivanje sa svojstvom položaja
Ovo je vjerojatno najpoznatija metoda, ali najčešće korištena kada se koristi s CSS-om. Ali ovdje trebamo dodati da također nije idealna i ova metoda također ima svoje male nijanse koje su povezane sa središtem elementa, koji ako je postavljen kao postotak, bit će centriran na lijevoj strani elementa gornja strana, unutar samog bloga.
CSS
Competaird-opcija (
rub: 2px solid #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%;
obrub: 2px čvrsta #4a4848;
}
Prored ili visina retka okomita je visina između redaka teksta u prikazanoj HTML stranici. Gotovo uvijek ovu vrijednost udaljenosti postavlja na odgovarajuću vrijednost preglednik ili mehanizam za prikazivanje. Ova vrijednost obično ovisi o fontu stranice koja se prikazuje i drugim čimbenicima.
Usklađivanje sa svojstvom tablice
Kod ove metode koristimo provjerenu i staru metodu, gdje elemente pretvaramo u tablicu u kojoj se nalaze ćelije. Što se tiče oznake koja se zove table, ona se ovdje neće koristiti; ovdje ćemo postaviti potpuno drugačija CSS svojstva, ovo je display: table;, display: table-cell;. Ako govorimo o najstarijim verzijama IE-a, podaci ovdje jednostavno neće biti prikazani. Nadam se da ste ažurirali svoj preglednik jer više nije relevantan i prikazuje gotovo sve netočno.
Cherevert-varijacija (
rub: 2px čvrsta #c30b0b;
visina: 173px;
prikaz: stol;
širina: 100%;
veličina fonta: 17px;
font-weight: bold;
boja: #3945a0;
}
Cherevert-varijacija div(
prikaz: tablica-ćelija;
okomito poravnanje: sredina;
poravnanje teksta: središte;
}
Prije svega, pogledajmo što je zadana vrijednost koju koristi većina preglednika. Većina modernih dnevnih preglednika ima 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 još uvijek se koriste, au nekim su slučajevima i korisni. Time se uspostavlja glavna os, tako da se definicija usmjerenih savitljivih elemenata nalazi u spremniku za diskete.
CSS
Varijanta-vodoravno (
rub: 2px čvrsta #d20c0c;
visina: 147px;
zaslon: savitljiv;
align-items: center;
justify-content: centar;
veličina fonta: 18px;
font-weight: bold;
boja: #49518c;
}
Možete odrediti vrijednost za visinu retka na isti način na koji biste odredili bilo koju drugu veličinu u css-u, bilo kao broj, veličinu piksela ili postotak.
Usklađivanje sa svojstvom transformacije
I sada smo došli do najekstremnije metode, ali ne i do najnovije primjene u korištenju svog web dizajna. Ovdje je sve jednostavno, morate pomaknuti navedeni element okomito na vrijednost koja vam je potrebna. Vlasništvo transformirati, ovo je popis transformacija koje instalacijski program primjenjuje prilikom instaliranja paketa. Instalater primjenjuje transformacije istim redoslijedom kako su navedene u svojstvu.
CSS
Vertikalna medilpasuda (
rub: 2px solid #e00a0a;
visina: 158px;
veličina fonta: 19px;
font-weight: bold;
boja: #353c71;
}
.vertical-medilpasudsa > div(
položaj: relativan;
vrh: 50%;
transformacija: translateY(-50%);
poravnanje teksta: središte;
}
Kada odredite vrijednosti kao broj, koristit će trenutnu veličinu fonta kao osnovu. Trenutna veličina fonta množi se brojem koji navedete za izračun visine retka ili razmaka između redaka.
Ako želite vodoravno centrirati znakove u elementu, trebali biste koristiti text-align: center. Jedna je mogućnost ako ga želite centrirati okomito i imate fiksno podnožje zaglavlja i jedan red teksta, postavite visinu retka da bude ista kao visina vašeg podnožja.
Ako trebate centrirati tekst unutar elementa kao što je div, zaglavlje ili odlomak, možete upotrijebiti CSS svojstvo poravnanja teksta.
Poravnavanje teksta ima nekoliko valjanih svojstava:
Centar: Tekstura je centrirana;
lijevo: Bit će poravnat s lijevom stranom spremnika;
pravo: Poravnano na desnu stranu spremnika
opravdati: Prisilno poravnati s lijevim i desnim rubom spremnika, s iznimkom najudaljenijih linija;
opravdati sve:Čini da krajnja linija opravdava znakove;
početak: Isto kao i lijevo, samo ako smjer ide lijevo desno. Ali bit će ispravno ako prvo postavite smjer teksta, koji će se dogoditi s desna na lijevo;
Kraj: Suprotno od početka;
podudarni roditelj: Slično nasljeđivanju, osim za početak i kraj, izračunava se u odnosu na nadređeni element;
Koristite ova svojstva za poravnavanje teksta unutar nadređenog ili omotnog diva. Ako želite vodoravno centrirati tekst u elementu, trebali biste koristiti text-align: center.
Jedna je opcija ako ga želite centrirati okomito, ako imate fiksno podnožje zaglavlja i jedan red teksta, postavite visinu retka da bude ista kao visina vašeg podnožja.
Svatko tko se bavi layoutom prije ili kasnije susreće se s potrebom okomitog poravnavanja elemenata... i znaju koje poteškoće mogu nastati prilikom poravnavanja elementa prema sredini. U CSS-u postoji svojstvo `vertical-align` s mnogo vrijednosti koje bi, logično, trebale izvršiti okomito poravnanje. Međutim, u praksi to uopće ne funkcionira kako se očekuje.
Postoji nekoliko tehnika za rješavanje ovog problema. U nastavku ćemo pobliže pogledati svaku od njih.
1. Poravnanje pomoću tablice
U ovom slučaju zamjenjujemo vanjski blok tablicom s jednom ćelijom. Poravnanje će se primijeniti na sadržaj ćelije, odnosno unutarnjeg bloka.
HTML
CSS
Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnavanje: sredina; boja pozadine: #ffc;)
Glavni nedostatak ovog rješenja, sa semantičkog gledišta, je korištenje tablice u druge svrhe od one za koju je namijenjena. Drugi nedostatak je što stvaranje tablice zahtijeva dodavanje još jednog elementa oko vanjskog bloka.
Prvi nedostatak može se djelomično izbjeći zamjenom oznaka tablice s div i postavljanjem načina prikaza tablice u CSS-u.
HTML
CSS
Vanjski omotač (prikaz: tablica;) .vanjski (prikaz: ćelija-tablice;)
2. Poravnanje pomoću uvlaka
Pod uvjetom da znamo visine unutarnjeg i vanjskog bloka, poravnanje se može postaviti pomoću okomitih uvlaka unutarnjeg bloka pomoću formule: (H vanjski – H unutarnji) / 2.
CSS
Vanjski (visina: 200px;) .unutarnji (visina: 100px; margina: 50px 0;)
Loša strana rješenja je obavezno poznavanje visine oba bloka.
3. Poravnanje pomoću line-height
Ako unutarnji blok ne zauzima više od jednog retka teksta, tada možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da se sadržaj unutarnjeg bloka ne bi trebao prelamati u drugi redak, preporučljivo je također dodati white-space: nowrap i overflow: skrivena pravila.
CSS
Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (bjelina: nowrap; preljev: skriven;)
Ova se metoda također može koristiti za poravnavanje višerednog teksta. Da biste to učinili, unutarnji blok mora poništiti vrijednost visine retka i također dodati display: inline-block i vertical-align: središnja pravila.
CSS
Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (visina linije: normalno; prikaz: umetnuti blok; okomito poravnanje: sredina;)
Nedostatak ove metode je da mora biti poznata visina vanjskog bloka.
4. Poravnanje korištenjem "istezanja"
Ova metoda se može koristiti kada nam je poznata visina unutarnjeg bloka, ali vanjskog nije.
Za primjenu ove metode potrebno nam je:
- Postavite vanjski blok na položaj relativnog pozicioniranja: relative , a unutarnji blok na apsolutni položaj: absolute ;
- Unutarnjem bloku dodajte nekoliko pravila top: 0 i bottom: 0, zbog čega će se rastegnuti na cijelu visinu vanjskog bloka;
- Postavite okomito ispunjavanje unutarnjeg bloka na auto.
CSS
Vanjski (položaj: relativan;) .unutarnji (visina: 100px; položaj: apsolutni; vrh: 0; donji: 0; margina: auto 0;)
5. Usklađivanje s negativnim vrhom margine
Slično prethodnoj, ova metoda se koristi kada je nepoznata visina vanjskog bloka, ali je poznata visina unutarnjeg bloka.
Morate postaviti vanjski blok na relativno pozicioniranje, a unutarnji blok na apsolutno pozicioniranje. Zatim pomaknite unutarnji blok prema dolje za polovicu visine vanjskog vrha bloka: 50% i podignite ga za polovicu vlastite visine margin-top: -H unutarnji / 2 .
CSS
Vanjski (položaj: relativan;) .unutarnji (visina: 100 px; položaj: apsolutni; vrh: 50%; margin-top: -50 px;)
Nedostatak ove metode je što se mora znati visina unutarnje jedinice.
6. Poravnanje pomoću transformacije
Metoda se može koristiti kada je visina unutarnje jedinice nepoznata. Morate pomaknuti unutarnji blok prema dolje za polovicu visine gornjeg dijela vanjskog bloka: 50%, zatim upotrijebite svojstvo transformacije i pomaknite ga natrag prema gore pomoću funkcije translateY(-50%).
CSS
Vanjski (položaj: relativan;) .unutarnji (položaj: apsolutan; vrh: 50%; transformacija: translateY (-50%);)
7. Usklađivanje s pseudoelementom
Ovo je najuniverzalnija metoda koja se može koristiti kada su visine obaju blokova nepoznate.
Bit metode je dodati inline-blok s visinom od 100% unutar vanjskog bloka i dodijeliti mu okomito poravnanje. Tako će visina dodanog bloka biti jednaka visini vanjskog bloka. Unutarnji blok će biti poravnat okomito u odnosu na dodani, a time i vanjski blok.
Kako se ne bi narušila semantika, preporučljivo je dodati umetnuti blok koristeći pseudoelemente prije ili poslije.
CSS
Vanjski :prije ( prikaz : umetnuti blok ; visina : 100% ; okomito poravnanje : sredina ; sadržaj : "" ;) .unutarnji (prikaz : umetnuti blok ; okomito poravnanje : sredina ; )
Nedostatak ove metode je što se ne može koristiti s apsolutnim pozicioniranjem unutarnje jedinice.
8. Usklađivanje s Flexboxom
Najsuvremenija metoda okomitog poravnanja je korištenje fleksibilnog rasporeda okvira (ili Flexbox). Omogućuje vam fleksibilnu kontrolu pozicioniranja elemenata na stranici, raspoređujući ih gotovo bilo gdje. Središnje poravnanje za Flexbox vrlo je jednostavan zadatak.
Problem okomitog centriranja elemenata u CSS-u ima niz gotovih rješenja. Odabir metode poravnanja u svakom pojedinom slučaju ovisi o vrsti, veličini, položaju elemenata i drugim za njih određenim svojstvima.
Ispod su neke popularne tehnike okomitog poravnanja među dizajnerima izgleda. Prikazuje kako rade i za koje je slučajeve svaki od njih najprikladniji.
Evo dva div elementa:
Svaka će se metoda koristiti za poravnavanje unutarnje jedinice sa središtem vanjske jedinice.
line-height za jednu liniju
Kada roditelj zauzima jedan redak teksta i poznata je visina djeteta, može se primijeniti svojstvo line-height. Vrijednost svojstva mora biti jednaka visini vanjskog bloka. Ovo radi samo za jedan redak, pa je korisno dodati overflow: hidden i white-space: nowrap dijetetu.
Neće biti moguće koristiti postotni zapis line-height=100%, jer je 100% u ovom slučaju visina fonta.
Spremnik (
visina: 300px;
line-height: 300px;
}
Unutarnji (
razmak: nowrap;
preljev: skriven;
}
Metoda je primjenjiva samo ako je poznata visina vanjskog bloka.
Tablica s okomitim poravnanjem
Stol je idealan za vertikalno poravnavanje elemenata. Kako se ne bi kršila semantika, bolje je izraditi elemente tablice pomoću CSS-a. Položaj sadržaja ćelije kontrolira se okomitim poravnavanjem. Postoje četiri vrijednosti za ovo svojstvo u tablicama:
Osnovno - zadano;
. bottom — sadržaj na dnu ćelije;
. srednji — sadržaj u sredini ćelije;
. vrh — sadržaj na vrhu ćelije.
U prvom primjeru, jedna ćelija tablice postaje vanjski blok.
Spremnik (
prikaz: tablica-ćelija;
okomito poravnanje: sredina;
}
Dobra stvar kod ove metode je što radi za elemente bez zadane visine, ali u nekim slučajevima njezina upotreba je otežana činjenicom da vanjski blok, kao i svaka ćelija tablice, prilagođava svoju širinu svom sadržaju i možete ga rastegnuti samo eksplicitnim postavljanjem širine za širinu. Za ćeliju bez tablice postoci ne funkcioniraju adekvatno.
Taj se nedostatak ispravlja omatanjem ćelije u roditeljsku sa svojstvom display:table. Veličina ovog elementa može se postaviti kao postotak. Konačni kod će izgledati ovako:
Vanjski omot (
prikaz: stol;
}
Spremnik (
prikaz: tablica-ćelija;
okomito poravnanje: sredina;
}
Pozicija: apsolutna + negativna margina
Metoda se koristi kada je poznata visina unutarnjeg elementa. Vanjskoj jedinici može biti nepoznat. Roditelju je dan relativni položaj, a djetetu unutar njega apsolutni položaj.
Gornja vrijednost svojstva od 50% uzrokuje da se ugniježđeni element pozicionira s gornjim rubom u sredini vanjskog bloka. Sve što preostaje je podignuti njegov negativni rubni vrh za pola vlastite visine tako da stoji točno u središtu okomice.
Spremnik (
položaj: relativan;
}
Unutarnji (
visina: 140px;
pozicija: apsolutna;
vrh: 50%;
margin-top: -70px;
}
Nedostatak ove metode je potreba da se zna visina djeteta.
Poravnanje u skladu s vertikalnim poravnanjem
Poravnanje inline i inline-block elemenata, uključujući slike i ikone, u okolnom tekstu postiže se svojstvom vertical-align. Za razliku od tablice, u ovom slučaju radi cijeli skup njegovih vrijednosti navedenih u specifikaciji.
Ako je poznata visina roditelja, ovo se svojstvo može koristiti za centriranje višerednog teksta.
Za vanjski blok propisano je centriranje jedne linije.
Spremnik (
visina: 140px;
line-height: 140px;
}
Vrijednost linije visine za unutarnji blok se redefinira na normalnu ili bilo koju željenu vrijednost. Također je dano poravnanje vertical-align: middle i pretvorba u vrstu inline-block - display: inline-block.
Unutarnji (
prikaz: inline-block;
visina linije: normalna;
okomito poravnanje: sredina;
}
Nedostatak ove metode je što morate znati visinu roditelja.
Usklađivanje s transformacijom
Funkcija translateY svojstva transformacije omogućuje vam centriranje unutarnjeg bloka nepoznate visine. Da biste to učinili, roditelj mora biti postavljen relativno, a dijete apsolutno.
Svojstvo top s vrijednošću od 50% spušta unutarnji blok tako da se njegov gornji rub nalazi u sredini njegovog roditelja. Vrijednost translateY: -50% podiže element na polovicu vlastite visine i time poravnava okomita središta blokova.
Spremnik (
položaj: relativan;
}
Unutarnji (
pozicija: apsolutna;
vrh: 50%;
transformacija: translateY(-50%);
}
Nedostatak ove tehnike je ograničena podrška za transformacijske funkcije u pregledniku IE.
Usklađivanje preko pseudoelementa
Metoda funkcionira kada je visina nepoznata ni za prvi ni za drugi blok. Inline-block pseudoelement dodaje se unutar nadređenog koristeći prije ili poslije. Visina dodanog elementa mora biti jednaka visini roditelja - visina: 100%. Okomito poravnanje sadržaja postavlja se pomoću vertical-align: middle.
Korištenjem vertical-align: middle, unutarnji blok je poravnat u odnosu na ovaj pseudoelement. Budući da roditelj i dijete imaju istu visinu, unutarnji element, iako je okomito poravnat s pseudoelementom, također je centriran s vanjskom kutijom.
Spremnik:prije (
sadržaj: "";
visina: 100%;
okomito poravnanje: sredina;
prikaz: inline-block;
}
Unutarnji (
prikaz: inline-block;
okomito poravnanje: sredina;
}
Univerzalna metoda. Ne radi ako je unutarnja jedinica postavljena na apsolutno pozicioniranje.
Flexbox
Najnoviji i najlakši način okomitog poravnavanja elemenata. Flexbox vam omogućuje da rasporedite elemente web stranice kako želite. Za centriranje bloka trebate samo postaviti display: flex za roditelja i margin: auto za dijete.
Spremnik (
zaslon: savitljiv;
širina: 320px;
visina: 140px;
}
Unutarnji (
širina: 120px;
margina: auto;
}
Flexbox radi samo u modernim preglednicima.
Odabir metode
Koju tehniku okomitog poravnanja koristiti ovisi o zadatku i ograničenjima koja mogu biti prisutna u svakom pojedinom slučaju.
Visina elemenata je nepoznata
U ovoj situaciji možete koristiti jednu od četiri univerzalne metode:
1. Tablica. Roditelj postaje ćelija tablice stvorena u HTML-u ili putem display-table/display-cell. Ovaj nadređeni element dobiva vertikalno poravnanje: sredina.
2. Pseudoelement. Za vanjski blok stvara se pseudoelement unutarnjeg bloka s širinom=100% i vertikalnim poravnanjem: sredinom. Djetetu se daje display: inline-block i vertical-align: middle. Metoda ne radi samo kada je unutarnjem bloku dano apsolutno pozicioniranje.
3. Transformirati. Roditelj dobiva položaj: srodnik. Djetetu je dan položaj: apsolutni, gornji: 50% i transformacija: translateY(-50%);
4. Flexbox. Vanjski blok je postavljen na display: flex, unutarnji blok je postavljen na marginu: auto.
Poznata je samo visina djeteta
Vanjska jedinica je postavljena relativno; Unutarnji element ima apsolutno pozicioniranje, vrh: 50% i margina-vrh jednaka polovici njegove visine.
Jedna linija po bloku s poznatom visinom
Vanjski blok dobiva svojstvo visine linije s vrijednošću jednakom njegovoj visini.
Visina vanjskog bloka je poznata, ali unutarnjeg elementa nije.
Roditelju je dana visina linije jednaka njegovoj visini. Visina retka djeteta je redefinirana na normalnu ili bilo koju željenu vrijednost, a display: inline-block i vertical-align: middle su joj dodijeljeni.
Cilj današnjeg članka je pokazati vam kako centrirati div, vodoravno i okomito, koristeći nekoliko CSS trikova. Također ćemo vam reći kako centrirati cijelu stranicu ili pojedinačni div element.
Jednostavno centriranje DIV elementa na stranici
Ova će metoda savršeno funkcionirati u svim preglednicima.
CSS
Center-div ( margina: 0 automatski; širina: 100px; )
Primjer
Vrijednost auto u svojstvu margine postavlja lijevu i desnu marginu na cijeli dostupan prostor na stranici. Ovdje je važno zapamtiti da centrirani div element mora imati postavljenu vrijednost širine.
Centriranje DIV-a unutar DIV elementa na starinski način
Ova metoda div središnjeg poravnanja radit će u svim preglednicima.
CSS
Outer-div (padding: 30px; ) .inner-div (margina: 0 auto; width: 100px; )
HTML
Primjer
Vanjski div se može postaviti bilo gdje, ali unutarnji div mora imati određenu širinu ( širina).
Centriranje DIV-a unutar DIV elementa pomoću inline-bloka
U ovoj metodi centriranja diva unutar diva, nije potrebno specificirati širinu unutarnjeg elementa. Radit će u svim modernim preglednicima, uključujući IE8.
CSS
Outer-div ( padding: 30px; text-align: center; ) .inner-div ( display: inline-block; padding: 50px; )
HTML
Primjer
Svojstvo poravnanja teksta radi samo na ugrađenim elementima. Inline-block vrijednost omogućuje da unutarnji div bude prikazan kao umetnuti element i također kao blok ( inline-blok). Svojstvo poravnanja teksta na vanjskom div elementu omogućit će nam centriranje unutarnjeg diva.
Centrirajte DIV unutar DIV elementa vodoravno i okomito
Ovdje se margina: auto koristi za centriranje diva u sredini stranice. Primjer će raditi u svim modernim preglednicima.
CSS
Outer-div (padding: 30px; ) .inner-div (margina: auto; width: 100px; height: 100px; )
HTML
Primjer
Unutarnji div element mora imati određenu širinu ( širina) i visina ( visina). Metoda neće raditi ako vanjski div element ima fiksnu visinu.
Centrirajte DIV na dnu stranice
Ovdje se margina: auto koristi za okomito centriranje diva, a apsolutno pozicioniranje za vanjski element. Metoda će raditi u svim modernim preglednicima.
CSS
Outer-div (position: absolute; bottom: 30px; width: 100%; ) .inner-div (margin: 0 auto; width: 100px; height: 100px; background-color: #ccc; )
HTML
Primjer
Unutarnji div mora imati postavljenu širinu. Prostor na dnu stranice podešava se pomoću svojstva bottom vanjskog diva. Također možete centrirati div na vrhu stranice tako da svojstvo bottom zamijenite svojstvom top.
Centrirajte DIV-ove na stranici okomito i vodoravno
Ovdje, za centriranje diva, ponovno koristimo margin: auto i apsolutno pozicioniranje vanjskog diva. Metoda će raditi u svim modernim preglednicima.
CSS
Center-div (pozicija: apsolutna; margina: auto; vrh: 0; desno: 0; dno: 0; lijevo: 0; širina: 100px; visina: 100px; )
Primjer
Element div mora imati postavljenu širinu ( širina) i visina ( visina).
Izrada adaptivnog centriranja DIV elementa na stranici
Ovdje, za centriranje diva pomoću CSS-a, širinu div elementa činimo osjetljivom tako da reagira na promjene u veličini prozora. Ova metoda radi u svim preglednicima.
CSS
Center-div ( margina: 0 auto; max-width: 700px; )
Primjer
Centrirani div element mora imati postavljeno svojstvo max-width.
Centriranje DIV-a unutar elementa pomoću svojstava unutarnjeg bloka
Unutarnji div element ovdje je osjetljiv. Ova metoda centriranja diva unutar diva radit će u svim preglednicima.
CSS
Outer-div (padding: 30px; ) .inner-div (margina: 0 auto; max-width: 700px; )
HTML
Primjer
Unutarnji div mora imati postavljeno svojstvo max-width.
Centriranje dva responzivna diva jedan pored drugog
Ovdje imamo dva responzivna div elementa jedan pored drugog. Ova metoda postavljanja diva u središte zaslona radit će u svim modernim preglednicima.
CSS
Spremnik (text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) zaslon i (max-width: 600px) ( .left-div, .right-div ( lef max-width: 100%; ) )
HTML
Primjer
Ovdje imamo nekoliko elemenata s primijenjenim svojstvom inline-block, koji se nalaze unutar središnjeg spremnika. Ovaj primjer također koristi CSS medijske upite; to jest, ako je veličina zaslona manja od 600 piksela, tada je svojstvo maksimalne širine za lijevi i desni div postavljeno na 100%.
DIV element centriran pomoću Flexboxa
Ovdje centriramo CSS div pomoću Flexboxa. Namijenjen je olakšavanju procesa razvoja dizajna korisničkog sučelja. Ovaj modul podržavaju Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, kao i Android preglednik 40+.
CSS
Spremnik ( display: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )
Danas ćemo se, dragi čitatelju, pozabaviti problemom okomitog poravnanja u bloku div.
Najvjerojatnije već znate za postojanje prekrasnog CSS svojstva okomito poravnati. I sam Bog nam je naredio da koristimo upravo ovo svojstvo za okomito poravnanje (nije uzalud tako razumljivo ime).
Formulacija problema: Morate centrirati sadržaj bloka promjenjive visine u odnosu na vertikalu.
Sada počnimo rješavati problem.
I tako, imamo blok, njegova visina se može promijeniti:
Prvo što vam pada na pamet je napraviti sljedeću fintu:
Postoje svi razlozi za vjerovanje da fraza Blokiraj sadržaj bit će poravnat sa središnjom visinom div spremnika.
Ali nije bilo tamo! Na ovaj način nećemo postići očekivano središnje poravnanje. I zašto? Čini se da je sve ispravno naznačeno. Ispostavilo se da je ovo rub: vlasništvo okomito poravnati može se koristiti samo za poravnavanje sadržaja ćelija tablice ili za međusobno poravnavanje umetnutih elemenata.
Što se tiče poravnanja unutar ćelije tablice, mislim da je sve jasno. Ali objasnit ću još jedan slučaj s inline elementima.
Okomito poravnanje inline elemenata
Pretpostavimo da imate redak teksta koji je razbijen oznakama retka na dijelove:
Vas pozdravlja komad tekst!
Umetnuta oznaka je spremnik čiji izgled ne uzrokuje prelamanje sadržaja u novi redak.
Radnja blok oznake uzrokuje prelamanje sadržaja spremnika u novi redak.
je blok oznaka. Ako dijelove teksta zatvorimo u blokove, tada će svaki od njih biti u novom retku. Korištenje oznake , koji, za razliku od, mala su slova, spremnici se neće premjestiti u novi red, svi spremnici ostat će na istoj liniji.Kontejner praktičan za korištenje kada specificirate dio teksta posebnim oblikovanjem (označite ga bojom, drugim fontom itd.)
Za kontejnere Primijenite sljedeća CSS svojstva:
#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )
Rezultirajući redak teksta izgledat će ovako:
Ovo nije ništa više od okomitog poravnanja inline elemenata i CSS svojstva okomito poravnati savršeno se nosi s ovim zadatkom.
Malo smo se omesti, sad se vraćamo glavnom zadatku.
Okomito poravnanje u div spremniku
Bez obzira na sve, za poravnanje unutar div spremnika koristit ćemo svojstvo okomito poravnati. Kao što sam već rekao, ovo se svojstvo može koristiti u slučaju poravnavanja inline elemenata (o ovom slučaju smo detaljno raspravljali gore i nije nam prikladan za poravnanje u div spremniku); preostaje samo iskoristiti činjenicu da okomito poravnati radi za ćelije tablice.
Kako ovo možemo koristiti? Nemamo stol, radimo s div spremnikom.
Ha, ispada da je vrlo jednostavno.
CSS svojstvo prikaz omogućuje vam pretvaranje našeg div bloka u ćeliju tablice, to se može učiniti jednostavno i prirodno:
Recimo da imamo klasu div poravnaj tekst:
Blokiraj sadržajZa ovaj blok navodimo sljedeće CSS svojstvo:
Textalign (prikaz: tablica-ćelija; )
Ova CSS instrukcija će čudesno pretvoriti naš div u ćeliju tablice bez vizualne promjene na bilo koji način. I za ćeliju tablice možemo primijeniti svojstvo okomito poravnati u potpunosti i željeno okomito poravnanje će funkcionirati.
Ipak, ne može sve tako jednostavno završiti. Imamo prekrasan IE preglednik. Ne zna raditi s imovinom prikaz: tablica-ćelija(Predlažem da pročitate tablicu koja ilustrira funkcionalnost ovog CSS svojstva u različitim preglednicima na web stranici htmlbook.ru). Stoga ćemo morati pribjeći raznim trikovima.
Postoji mnogo načina za postizanje poravnanja u div spremniku za sve preglednike:
- Metoda koja koristi dodatni pomoćni div spremnik
- Metoda koja koristi izraz. To je povezano s lukavim izračunom visina blokova. Ne možete to učiniti bez poznavanja JavaScripta.
- Korištenje svojstva line-height. Ova je metoda prikladna samo za okomito poravnanje u bloku poznate visine i stoga nije primjenjiva u općem slučaju.
- Korištenje apsolutnog i relativnog pomaka sadržaja u slučaju IE preglednika. Ova metoda mi se čini najrazumljivijom i najjednostavnijom. Osim toga, može se implementirati za div spremnik promjenjive visine. Na njemu ćemo se detaljnije zadržati.
Kao što razumijete, samo moramo riješiti problem okomitog poravnanja u IE-u povezan s njegovim nerazumijevanjem svojstva prikaz: tablica-ćelija(ni IE6, ni IE7, ni IE8 nije upoznat s ovim svojstvom). Stoga, koristeći uvjetni komentar Specificirat ćemo različita CSS svojstva posebno za IE preglednike.
Uvjetni komentar
Vrsta konstrukcije:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
naziva se uvjetni komentar (pazite, tip uvjetnog komentara mora u potpunosti odgovarati navedenom primjeru, do razmaka).
Upute sadržane u takvom uvjetnom komentaru bit će izvršene samo ako preglednik koji tumači ovaj kod pripada obitelji IE.
Dakle, koristeći uvjetni komentar, možemo sakriti dio koda od svih preglednika osim IE.
Rješenje problema
Zbog svog ovog peršina, morat ćemo našem HTML kodu dati dva dodatna spremnika. Ovako će izgledati naš tekstualni blok:
Ovo je neka vrsta teksta za potvrdu.
Sastoji se od dvije linije.Za klasu div spremnika textalign Postavljena su svojstva CSS-a koja usklađuju njegov sadržaj okomito za sve normalne preglednike (osim IE-a, naravno):
Prikaz: tablica-ćelija; okomito poravnanje: sredina;
I još dva svojstva koja postavljaju širinu i visinu za blok:
Širina:500px; visina: 500px;
To je sasvim dovoljno za poravnanje sadržaja spremnika centrirano u odnosu na vertikalu, u svim preglednicima osim IE.
Sada počinjemo dodavati svojstva koja se odnose na poravnanje za preglednike IE obitelji(za njih smo koristili dodatne blokove div I raspon):
Pozivajući se na oznaku div unutar razrednog bloka textalign. Da biste to učinili, prvo morate naznačiti naziv klase, a zatim, odvojene razmakom, oznaku kojoj pristupamo.
Textalign div (pozicija: apsolutna; vrh: 50%; )
Ovaj dizajn znači: za sve div oznake unutar bloka s klasom textalign primijeniti navedena svojstva.
Sukladno tome, stilovi navedeni za blok textalign su modificirani:
Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; )
Sada je gornja lijeva točka bloka teksta pomaknuta prema dolje za 50%.
Kako bih objasnio što se događa, nacrtao sam ilustraciju:
Kao što vidite na slici, napravili smo određeni napredak. Ali to nije sve! Gornja lijeva točka žutog bloka doista se pomaknula 50% prema dolje, u odnosu na roditeljski (ljubičasti) blok. Ali trebamo da bude na pedeset posto visine ljubičastog bloka. središte žutog bloka, a ne njegovu gornju lijevu točku.
Sada će oznaka ući u igru raspon i njegov relativni položaj:
Raspon poravnanja teksta (položaj: relativno; vrh: -50%; )
Dakle, pomaknuli smo žuti blok prema gore za 50% njegove visine, u odnosu na njegov početni položaj. Kao što razumijete, visina žutog bloka jednaka je visini centriranog sadržaja. A posljednja operacija na spremniku raspona smjestila je naš sadržaj u sredinu ljubičastog bloka. hura!
Hajdemo malo varati
Prije svega, moramo sakriti peršin od svih normalnih preglednika i otvoriti ga za IE. To se može učiniti, naravno, pomoću uvjetnog komentara; nismo uzalud upoznali s njim:
Postoji mali problem. Ako je centrirani sadržaj previsok, to dovodi do neugodnih posljedica: postoji dodatna visina za okomiti pomak.
Rješenje problema: treba dodati svojstvo preljev: skriven blok textalign.
Detaljno upoznajte nekretninu prelijevanje moguće u .
Završne CSS upute za blok textalign ima oblik:
Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; overflow: hidden; border: 1px full black; )
Žao mi je, zaboravio sam spomenuti jednu važnu točku. Ako pokušaš postaviti visinu klasnog bloka textalign kao postotak, onda imate ništa neće uspjeti.
Centriranje u bloku promjenjive visine
Vrlo često postoji potreba za postavljanjem visine klasnog bloka textalign ne u pikselima, već kao postotak visine nadređenog bloka i poravnajte sadržaj div spremnika u sredini.
Kvaka je u tome što je to nemoguće učiniti za ćeliju tablice (ali blok klase textalign pretvara točno u ćeliju tablice, zahvaljujući svojstvu display:table-cell).
U tom slučaju morate koristiti vanjski blok za koji je navedeno svojstvo CSS prikaz: stol i već mu postavite postotnu vrijednost visine. Zatim se blok ugniježdio u njega, s CSS direktivom display:table-cell, sretno će naslijediti visinu nadređenog bloka.
Kako bismo implementirali blok promjenjive visine u našem primjeru, malo ćemo urediti CSS:
U razred textalign promijenit ćemo vrijednost imovine prikaz S tablica-ćelija na stol i uklonite direktivu za poravnanje okomito poravnanje: sredina. Sada možemo sigurno promijeniti vrijednost visine s 500 piksela na, na primjer, 100%.
Dakle, CSS svojstva za blok klase textalign izgledat će ovako:
Textalign( display: table; width:500px; height: 100%; position: relative; overflow: hidden; border: 1px full black; )
Ostaje samo implementirati centriranje sadržaja. Da biste to učinili, div spremnik ugniježđen u blok klase textalign(ovo je isti žuti blok na slici), trebate postaviti svojstvo CSS display:table-cell, tada će naslijediti visinu od 100% od roditeljskog bloka textalign(ljubičasti blok). I ništa nas neće spriječiti da uskladimo sadržaj ugniježđenog div spremnika u središtu sa svojstvom okomito poravnanje: sredina.
Dobivamo još jedan dodatni popis CSS svojstava za div blok ugniježđen u spremnik textalign.
Textalign div( display: table-cell; vertical-align: middle; )
To je cijeli trik. Ako želite, možete imati promjenjivu visinu sa sadržajem u sredini.
Za više informacija o okomitom poravnanju bloka promjenjive visine, pogledajte.
Najbolji članci na temu
