Od autora: Ponovno vam želim dobrodošlicu na stranice našeg bloga. U današnjem članku želio bih govoriti o razne tehnike poravnanje koje se može primijeniti i na blokove i na njihov sadržaj. Konkretno, kako poravnati blokove u css-u, kao i poravnanje teksta.
Poravnavanje blokova prema sredini
U CSS-u, centriranje bloka je jednostavno. Ovo je mnogima najpoznatija tehnika, ali o njoj bih želio razgovarati prije svega. To znači centrirano vodoravno poravnanje u odnosu na nadređeni element. Kako se to radi? Recimo da imamo spremnik i naš eksperimentalni subjekt je u njemu:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Pretpostavimo da je ovo zaglavlje stranice. Ne proteže se cijelom širinom prozora i trebamo ga centrirati. Pišemo ovako:
#zaglavlje( širina/maks. širina: 800px; margina: 0 auto; |
Moramo odrediti točnu ili maksimalnu širinu, a zatim zapisati svojstvo ključa - margin: 0 auto. Postavlja vanjske margine našeg zaglavlja, prva vrijednost određuje gornju i donju marginu, a druga desnu i lijevu marginu. Vrijednost auto govori pregledniku da automatski izračuna ispunu s obje strane tako da element bude točno centriran u roditelju. Udoban!
Poravnanje teksta
Ovo je također vrlo jednostavna tehnika. Za poravnavanje svih inline elemenata koje možete koristiti svojstvo poravnanja teksta i njegove vrijednosti: lijevo, desno, središte. Potonji centrira tekst, što je ono što nam treba. Na isti način možete čak i poravnati sliku, jer je i to standardno inline element.
Poravnajte tekst okomito
Ali ovo je kompliciranije. Prema zadanim postavkama ne postoji jednostavno, dobro poznato svojstvo koje lako centrira tekst okomito u blok spremniku. Međutim, postoji nekoliko tehnika koje su dizajneri izgleda smislili tijekom godina.
Postavite visinu bloka pomoću ispune. Način nije postaviti eksplicitnu visinu pomoću visine, već je stvoriti umjetno pomoću podstava na vrhu i dnu, koja bi trebala biti ista. Kreirajmo bilo koji blok i napišimo mu sljedeća svojstva:
div( pozadina: #ccc; padding: 30px 0; )
div( pozadina : #ccc; ispuna: 30px 0; |
Pozadina služi samo za vizualno prikazivanje rubova kao i podloge. Sada visinu bloka čine ove dvije uvlake i sama linija, a sve to izgleda ovako:
Definirajte visinu linije za blok. Mislim da je više pravi put, ako trebate poravnati jedan redak teksta. Pomoću njega možete pisati visinu prema normali, koristeći svojstvo visine. Nakon toga također treba postaviti visinu linije, kao i visinu bloka u cjelini.
div(visina: 60px; visina linije: 60px; )
div( visina: 60px; line-height: 60px; |
Rezultat će biti sličan gornjoj slici. Sve će raditi čak i ako dodate podstavu. Međutim, samo za jednu liniju. Ako trebate više teksta u elementu, tada ova metoda neće raditi.
Pretvorite blok u ćeliju tablice. Bit ove metode je da ćelija tablice ima svojstvo vertical-align: middle, koje okomito centrira element. Sukladno tome, u ovom slučaju blok treba postaviti na sljedeće:
div(prikaz: ćelija-tablica; okomito poravnanje: sredina; )
div( prikaz: tablica - ćelija; okomito - poravnaj : sredina ; |
Ova metoda je dobra jer možete poravnati onoliko teksta koliko želite prema sredini. Ali bolje je napisati display: table u bloku u kojem je naš div ugniježđen, inače možda neće raditi.
Pa, dolazimo do posljednje tehnike za danas - ovo je okomito poravnanje samih blokova. Mora se reći da, opet, ne postoji nekretnina koja bi bila namijenjena upravo za to, ali postoji nekoliko trikova koje biste trebali znati.
Postavite uvlake kao postotak. Ako znate visinu nadređenog elementa i postavite još jedan unutar njega blok element, tada ga možete centrirati pomoću postotnih uvlaka. Na primjer, roditelj ima visinu od 600 piksela. U njega postavite blok visok 300 piksela. Koliko se trebate odmaknuti pri vrhu i dnu da biste ga centrirali? 150 piksela svaki, što je 25% visine roditelja.
Ova metoda dopušta poravnanje samo kada dimenzije dopuštaju izračune. A ako je vaš roditelj visok 887 piksela, onda nećete moći točno snimiti ništa, to je već jasno.
Umetanje elementa u ćeliju tablice. Opet, ako transformiramo nadređeni element u ćeliju tablice, tada će blok umetnut u nju biti automatski centriran okomito. Da biste to učinili, roditelj samo treba postaviti vertical-align: middle.
A ako uz ovo napišemo i margin: 0 auto, tada će element postati horizontalno centriran!
Dobar dan, pretplatnici i čitatelji ove publikacije. Danas želim ići u detalje i reći vam kako centrirati tekst u CSS-u. U nekim prethodnim člancima kojih sam se neizravno dotakao ovu temu, znači imate određeno znanje u ovom području.
Međutim, u ovoj publikaciji ću vam reći o na sve moguće načine poravnavanje objekata, a također objasniti kako uvući i crvene linije u odlomcima. Pa krenimo s učenjem gradiva!
HTML i njegovi potomci i poravnati
Ova metoda se gotovo nikada ne koristi, jer su je zamijenili kaskadni stilski alati. Međutim, saznanje da takva oznaka postoji neće vam škoditi.
Što se tiče provjere valjanosti ( ovaj termin je detaljno opisano u članku ""), onda sama html specifikacija osuđuje korištenje < centar>, budući da je za valjanost potrebno koristiti tranzitiv DOCTYPE>.
Ovaj tipdopušta prolazak zabranjenih elemenata.
Sada prijeđimo na atribut poravnati. Postavlja horizontalno poravnanje objekata na i uklapa se nakon deklaracije oznake. Obično se može koristiti za poravnavanje sadržaja ulijevo ( lijevo), uz desni rub ( pravo), centrirano ( centar) i po širini teksta ( opravdati).
U nastavku ću dati primjer u kojem ću sliku i pasus postaviti u središte.
Ovaj će sadržaj biti centriran.
Imajte na umu da za sliku atribut koji analiziramo ima malo drugačija značenja.
U primjeru koji sam koristio poravnati="sredina". Zahvaljujući tome, slika je bila poravnata tako da se rečenica nalazi jasno u sredini slike.
Alati za centriranje u cssu
CSS svojstva dizajnirana za poravnanje blokova, teksta i grafički sadržaj, koriste se mnogo češće. To je prvenstveno zbog pogodnosti i fleksibilnosti implementacije stilova.
Pa počnimo s prvim svojstvom centriranja teksta - ovo je tekst-poravnati.
Funkcionira na isti način kao align in . Među ključnim riječima možete odabrati jednu s općeg popisa ili naslijediti karakteristike pretka ( naslijediti).
Želio bih napomenuti da u css3 možete postaviti još 2 parametra: start– ovisno o pravilima pisanja teksta (s desna na lijevo ili obrnuto), postavlja poravnanje lijevo ili desno (slično kao kod rada lijevo ili desno) i kraj– suprotno od početka (pri pisanju teksta slijeva nadesno djeluje kao desno, pri pisanju zdesna nalijevo – lijevo).
Rečenica s desne strane
Rečenica s krajem
Reći ću vam jedan mali trik. Prilikom odabira vrijednosti opravdati zadnji redak može ružno visi odozdo. Kako biste ga, primjerice, pozicionirali u središte, možete koristiti svojstvo tekst-poravnaj-zadnji.
Da biste okomito poravnali sadržaj stranice ili ćelije tablice, koristite svojstvo okomito poravnati. U nastavku sam opisao glavne ključne riječi element.
| Ključna riječ | Svrha |
| osnovna linija | Određuje poravnanje prema liniji pretka, koja se naziva bazna linija. Ako objekt predak nema takvu liniju, tada se poravnanje događa duž donje granice. |
| sredini | Sredina mutiranog objekta poravnata je s osnovnom linijom kojoj se dodaje visina nadređenog elementa. |
| dno | Dno odabranog sadržaja prilagođava se dnu objekta ispod njega. |
| vrh | Slično dnu, samo sa gornji dio objekt. |
| super | Čini znak superskriptom. |
| pod | Stvara indeks elementa. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C U E TOKODO
|
Udubljenja
I na kraju dolazimo do uvlaka pasusa. U css jezik koristi posebno svojstvo tzv tekstualna uvlaka.
Uz njegovu pomoć možete napraviti i crvenu liniju i izbočinu (morate odrediti negativnu vrijednost).
Da biste stvorili crvenu liniju, trebate znati samo jedan parametar.
Ovo je jednostavno svojstvo uvlačenja teksta.
Pohvaljujem one koji su svaki primjer isprobali u praksi. Pošaljite poveznice na moj blog svojim prijateljima i ne zaboravite se pretplatiti. Sretno! cao cao!
Srdačan pozdrav, Roman Chueshov
Pročitajte: 675 puta
Vrlo često zadatak je poravnati blok prema sredini stranice/ekrana, pa čak i tako da bez Java skripte, bez zadatka krute veličine ili negativne uvlake, tako da trake za pomicanje također rade za roditelja ako blok premašuje svoju veličinu. Na Internetu postoji dosta monotonih primjera o tome kako blok poravnati prema sredini ekrana. U pravilu se većina njih temelji na istim načelima.
Ispod su glavni načini rješavanja problema, njihove prednosti i mane. Da biste razumjeli bit primjera, preporučujem smanjenje visine/širine prozora s rezultatima u primjerima na navedenim poveznicama.
Opcija 1: Negativno uvlačenje.
Pozicioniranje blokirati koristeći gornje i lijeve atribute za 50%, i unaprijed znajući visinu i širinu bloka, postavite negativnu marginu, koja je jednaka polovici veličine blokirati. Veliki minus ovu opciju je da morate računati negativne podloge. Također blokirati ne ponaša se sasvim ispravno kada je okružen trakama za pomicanje - jednostavno je odrezan jer ima negativne margine.
Roditelj ( širina: 100%; visina: 100%; položaj: apsolutni; vrh: 0; lijevo: 0; preljev: automatski; ) .block ( širina: 250px; visina: 250px; položaj: apsolutni; vrh: 50%; lijevo : 50%; margina: -125px 0 0 -125px; img (max-width: 100%; height: auto; margin: 0 auto; border: none; ) )
Opcija 2. Automatsko uvlačenje.
Manje uobičajeno, ali slično prvom. Za blokirati postavite širinu i visinu, postavite atribute gore desno dolje lijevo na 0 i postavite margin auto. Prednost ove opcije su radne trake za pomicanje roditelj, ako potonji ima 100% širine i visine. Nedostatak ove metode je kruto postavljanje dimenzija.
Roditelj ( širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo: 0; preljev: auto; ) .block ( širina: 250px; visina: 250px; pozicija: apsolutna; vrh: 0; desno: 0; dno: 0; margina: auto; img (max-width: 100%; display: block; margin: none; )
Opcija 3. Tablica.
Pitajmo roditelj stolni stilovi, stanica roditelj Postavite poravnanje teksta na sredinu. A blokirati postavljamo linijski blok model. Nedostaci koje dobivamo su neradne trake za pomicanje i općenito, estetika "emulacije" tablice nije dobra.
Roditelj ( širina: 100%; visina: 100%; prikaz: tablica; položaj: apsolutni; vrh: 0; lijevo: 0; > .unutarnji ( prikaz: ćelija-tablice; poravnanje teksta: središte; okomito poravnavanje: sredina; ) ) .block ( prikaz: inline-block; img ( prikaz: blok; granica: ništa; ) )
Da biste ovom primjeru dodali svitak, morat ćete dodati još jedan element dizajnu.
Primjer: jsfiddle.net/serdidg/fk5nqh52/3.
Opcija 4. Pseudo-element.
Ova opcija je lišena svih problema navedenih u prethodnim metodama, a također rješava izvorne probleme. Poanta je u tome roditelj postaviti stilove pseudo element prije, naime 100% visina, središnje poravnanje i inline blok model. Isto je i sa blokirati postavlja se linijski blok model, centriran. Do blokirati nije "pao" ispod pseudo element, kada su dimenzije prvog veće od roditelj, naznačiti roditelj white-space: nowrap i font-size: 0, nakon čega blokirati poništite ove stilove sa sljedećim - white-space: normal. U u ovom primjeru font-size: 0 potreban je za uklanjanje razmaka između roditelj I blokirati zbog oblikovanja koda. Prostor se može ukloniti i na druge načine, ali smatra se da ga je najbolje jednostavno izbjegavati.
Roditelj ( širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo: 0; prekoračenje: auto; razmak: nowrap; poravnanje teksta: središte; veličina fonta: 0; &:prije ( visina: 100%; okomito poravnanje: ""; slika: obrub;
Ili, ako je potrebno da roditelj zauzme samo visinu i širinu prozora, a ne cijelu stranicu:
Roditelj (položaj: fiksno; gore: 0; desno: 0; dolje: 0; lijevo: 0; prekoračenje: automatski; razmak: nowrap; poravnanje teksta: središte; veličina fonta: 0; &:prije ( visina: 100%; display: inline-block; vertical-align: content: "" (prikaz: block; none; ) )
Opcija 5. Flexbox.
Jedan od najjednostavnijih i najelegantnijih načina je korištenje flexboxa. Ne zahtijeva nepotrebne pokrete tijela, prilično jasno opisuje bit onoga što se događa i vrlo je fleksibilan. Jedina stvar koju vrijedi zapamtiti pri odabiru ovu metodu- podrška za IE od verzije 10 uključivo. caniuse.com/#feat=flexbox
Roditelj ( širina: 100%; visina: 100%; položaj: fiksno; gore: 0; lijevo: 0; prikaz: savitljivo; poravnavanje stavki: središte; poravnavanje sadržaja: središte; opravdanje sadržaja: središte; preljev: automatski; ) .block ( pozadina: #60a839; img ( prikaz: blok; granica: nema; ))
Opcija 6. Transformacija.
Prikladno ako smo ograničeni strukturom i ne postoji način da se manipulira nadređenim elementom, ali blok treba nekako poravnati. doći će u pomoć css funkcija prevesti() . Na vrijednosti 50% apsolutno pozicioniranje postavit će gornji lijevi kut bloka točno u sredinu, tada će negativna vrijednost prijevoda pomaknuti blok relativno u odnosu na vlastiti vlastite veličine. Imajte na umu da se mogu pojaviti negativni učinci u obliku zamućenih rubova ili stila fonta. Također, ova metoda može dovesti do problema s izračunavanjem položaja bloka pomoću java-skripte, ponekad zbog kompenzacije gubitka 50% širine koristeći css lijevo svojstva Pravilo određeno za blok može pomoći: margin-right: -50%; .
Roditelj ( širina: 100%; visina: 100%; položaj: fiksno; vrh: 0; lijevo: 0; preljev: automatski; ) .block ( položaj: apsolutni; vrh: 50%; lijevo: 50%; transformacija: prevedi( -50%, -50%) ( prikaz: blok; ) )
Opcija 7. Gumb.
Korisnička opcija gdje blokirati uokviren u oznaku gumba. Gumb ima svojstvo centriranja svega što se nalazi unutar njega, odnosno elemenata inline i blok-linijskog (inline-block) modela. U praksi ne preporučam njegovu upotrebu.
Roditelj ( širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo: 0; preljev: automatski; pozadina: ništa; obrub: ništa; obris: ništa; ) .block ( prikaz: inline-block; img (prikaz: blok;; granica: ništa; ) )
Bonus
Koristeći ideju 4. opcije, možete postaviti vanjske margine za blokirati, a potonji će biti primjereno prikazan okružen trakama za pomicanje.Primjer: jsfiddle.net/serdidg/nfqg9rza/2.
Također možete poravnati sliku prema sredini, a ako je slika veća roditelj, smanjite ga na veličinu roditelj.
Primjer: jsfiddle.net/serdidg/nfqg9rza/3.
Primjer s velikom slikom:
Izgled i središnje poravnanje stranica web stranice kreativan je pothvat i često uzrokuje poteškoće početnicima. Pa da vidimo kako to učiniti. Recimo da želimo napraviti stranicu sa sljedećom strukturom:
Naša stranica sastoji se od četiri bloka: zaglavlje, izbornik, sadržaj i podnožje. Da bismo centrirali stranicu, stavit ćemo ova četiri bloka u jedan glavni blok:
Zaglavlje stranice
Sadržaj
Dno stranice
Koristeći ovu strukturu kao primjer, razmotrit ćemo nekoliko opcija.
Izgled i centriranje gumenog mjesta
Prilikom postavljanja gumene stranice glavna mjerna jedinica koja se koristi je -%, jer se stranica treba protezati po širini i zauzimati sav slobodni prostor.
Stoga će širina blokova "zaglavlje" i "podnožje" biti 100% širine zaslona. Neka širina bloka "izbornik" bude 30%, a blok "sadržaj" neka se nalazi pored bloka "izbornik", tj. mora imati lijevu marginu (margin-left) širine jednake širini bloka "menu", tj. 30%.
Kako bi blokovi "izbornik" i "sadržaj" bili jedan pored drugog, učinimo da blok "izbornik" pluta i gurnimo ga do lijevog ruba. Također ćemo postaviti pozadinske boje za naše blokove. Sada napišimo sve ovo u listu stilova (na stranici style.css)
#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :left; text-align:center; #content(background:#ffffff; margin-left:30% ; text-align:center; ) #footer(background: #3e4982; width:50px; color:font-size:10px )
Visina blokova postavljena je uvjetno tako da je rezultat bio vidljiv. Pogledajte našu stranicu u svom pregledniku:
Ako promijenite veličinu prozora preglednika, promijenit će se širina svih blokova. Ovo nije uvijek zgodno, jer... Kada se blok izbornika razvuče, pojavljuje se prazan prostor. Stoga je širina bloka "izbornika" često fiksna, pa učinimo isto. Da biste to učinili, zamijenite vrijednosti odgovarajućih svojstava u listu stilova:
... #menu( background:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...
Sada se naša stranica prostire prirodnije. Na gumeni raspored Stranice zauzimaju cijelu širinu zaslona, tako da poravnanje stranice nije potrebno.
Ali ako želite, možete podesiti da vaša stranica ima jednaku udaljenost s lijeve i desne strane zaslona. Da biste to učinili, morate dodati stil "glavnom" bloku, koji je spremnik za sve ostale blokove:
Sada naša stranica izgleda ovako:
Izgled i centriranje stranice, fiksna širina
U ovom slučaju morat ćemo pitati fiksne veličine naši blokovi:
#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; text-align:center; ) #footer(background:#3e4982; clear:both; width:50px; text-align:center; color:#FFFFFF; font- size:14px; padding-top:10px )
Sada je naša stranica pritisnuta na lijevi rub ekrana.
U ovom slučaju, središnje poravnanje stranica stranice može se izvršiti na sljedeći način. Podsjetimo se da naša stranica ima oznaku "body", kojoj se također može dati širina i malo ispune.
Učinimo ovo: dajte oznaci "body" širinu od 800 piksela (kao "glavni" blok) i padding-left od 50%. Tada će se cijeli sadržaj "glavnog" bloka prikazati na desnoj strani ekrana (tj. od sredine prema desno):
Da bi se naš "glavni" blok nalazio u sredini ekrana, njegova sredina se mora podudarati sa sredinom oznake "tijelo". one. trebate pomaknuti "glavni" blok ulijevo za pola njegove veličine. Širina "glavnog" bloka je 800 piksela, što znači da mu morate postaviti svojstvo "margin-left:-400px". Da, ovo svojstvo može imati negativne vrijednosti, tada se lijeva margina smanjuje (tj. pomiče ulijevo). A to je upravo ono što nam treba.
List stilova sada izgleda ovako:
body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; padding-top:40px; #menu(background:#6173cb; width:200px; height:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px;text-align:center;font-size:14px;
A naša stranica u pregledniku nalazi se točno u sredini:
Pogledali smo dvije opcije za centriranje stranica stranice; one zapravo nisu dogma. Možete eksperimentirati i osmisliti vlastitu verziju, samo provjerite kako funkcionira različitim preglednicima. Nažalost, ono što se dobro prikazuje u FireFoxu ili Operi može biti potpuno nerazumljivo prikazano u IE-u i obrnuto. I ovo moramo zapamtiti.
Sretno vam u vašoj kreativnoj potrazi!
Mislim da su se mnogi od vas koji su se morali baviti rasporedom susreli s potrebom okomitog poravnavanja elemenata i poznaju poteškoće koje nastaju prilikom poravnavanja elementa prema sredini.
Da, za okomito poravnanje CSS ima posebno svojstvo okomitog poravnanja s više vrijednosti. Međutim, u praksi to uopće ne funkcionira kako se očekuje. Pokušajmo ovo shvatiti.
Usporedimo sljedeće pristupe. Poravnajte pomoću:
- stolovi,
- uvlačenje,
- linija-visina
- istezanje,
- negativna margina,
- transformirati
- pseudo element
- flexbox.
Postoje dva div element, pri čemu je jedan od njih ugniježđen u drugi. Dajmo im odgovarajuće klase – vanjske i unutarnje.
Izazov je poravnati unutarnji element sa središtem vanjskog elementa.
Prvo, razmotrimo slučaj kada su dimenzije vanjskih i unutarnjih blokova poznat. Dodajmo pravilo display: inline-block unutarnjem elementu, te text-align: center i vertical-align: middle vanjskom elementu.
Imajte na umu da se poravnanje odnosi samo na elemente koji imaju inline ili inline-block način prikaza.
Postavimo i veličine blokova boje pozadine vidjeti njihove granice.
Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnavanje: sredina; boja pozadine: #ffc; ) .unutarnji (zaslon: inline-block; š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? Stvar je u tome što svojstvo vertical-align utječe na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga aplikacija ovog posjeda Do vanjski element nije ništa dao. Štoviše, primjena ovog svojstva na unutarnji element također neće učiniti ništa, jer su inline-blokovi poravnati okomito u odnosu na susjedne blokove, au našem slučaju imamo jedan inline blok.
Postoji nekoliko tehnika za rješavanje ovog problema. U nastavku ćemo pobliže pogledati svaku od njih.
Poravnanje pomoću tablice
Prvo rješenje koje pada na pamet je zamijeniti vanjski blok tablicom od jedne ćelije. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutarnji blok.
http://jsfiddle.net/c1bgfffq/1/
Očigledni minus ovu odluku– sa semantičkog gledišta neispravno je koristiti tablice za poravnanje. Drugi nedostatak je da za izradu tablice trebate dodati još jedan element okolo vanjska jedinica.
Prvi minus se može djelomično ukloniti zamjenom oznaka table i td s div i postavljanjem načina prikaza tablice u CSS-u.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Međutim, vanjski blok će i dalje ostati stol sa svim posljedicama.
Poravnanje pomoću uvlaka
Ako su poznate visine unutarnjeg i vanjskog bloka, tada se poravnanje može postaviti pomoću okomitih uvlaka unutarnjeg bloka pomoću formule: (H vanjski – H unutarnji) / 2.Vanjski (visina: 200px; ) .unutarnji (visina: 100px; margina: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/
Nedostatak rješenja je što je primjenjivo samo u ograničen broj slučajeve kada su poznate visine obaju blokova.
Poravnanje pomoću line-height
Ako znate da unutarnji blok ne smije zauzimati više od jednog retka teksta, tada možete koristiti svojstvo line-height i postaviti ga jednaka visini vanjski blok. Budući da se sadržaj unutarnjeg bloka ne bi trebao prelamati u drugi redak, preporučuje se dodavanje pravila white-space: nowrap i overflow: hidden.Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (bjelina: nowrap; preljev: skriven;)
http://jsfiddle.net/c1bgfffq/12/
Također ovu tehniku može se koristiti i za izravnavanje višeredni tekst, ako redefinirate vrijednost visine retka za unutarnji blok i također dodate display: inline-block i vertical-align: središnja pravila.
Vanjski (visina: 200px; visina linije: 200px; ) .unutarnji (visina linije: normalno; prikaz: umetnuti blok; okomito poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/
Nedostatak ove metode je da mora biti poznata visina vanjskog bloka.
Poravnanje pomoću "istezanja"
Ova metoda se može koristiti kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg bloka.Da biste to učinili potrebno vam je:
- postaviti na vanjsku jedinicu relativno pozicioniranje, a na unutarnje – apsolutni;
- dodajte pravila top: 0 i bottom: 0 unutarnjem bloku, zbog čega će se rastegnuti na cijelu visinu vanjskog bloka;
- postavite okomito ispunjavanje unutarnjeg bloka na auto.
http://jsfiddle.net/c1bgfffq/4/
Ideja koja stoji iza ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje da preglednik izračuna vertikalno ispunjavanje u jednakom omjeru ako je postavljeno na auto.
Usklađivanje s vrhom negativne margine
Ova metoda je postala široko poznata i vrlo se često koristi. Kao i prethodni, koristi se kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg.Morate postaviti vanjski blok na relativno pozicioniranje, a unutarnji blok na apsolutno pozicioniranje. Zatim trebate pomaknuti unutarnji blok prema dolje za polovicu visine vanjskog vrha bloka: 50% i podići ga za polovicu vlastite visine margin-top: -H unutarnji / 2.
Vanjski (položaj: relativan; ) .unutarnji (visina: 100 px; položaj: apsolutni; vrh: 50%; margin-top: -50 px; )
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 koristiti kada je visina unutarnje jedinice nepoznata. U ovom slučaju, umjesto postavljanja negativnog ispuna 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 u prethodna metoda Niste li mogli postaviti vrijednost kao postotak? Budući da se postotne vrijednosti margine izračunavaju u odnosu na nadređeni element, vrijednost od 50% bila bi polovica visine vanjske kutije, a morali bismo podići unutarnju kutiju na polovicu vlastite visine. Svojstvo transformacije savršeno je za to.
Nedostatak ove metode je što se ne može koristiti ako unutarnja jedinica ima apsolutno pozicioniranje.
Usklađivanje s Flexboxom
Većina moderan način okomito poravnanje je korištenje fleksibilnog rasporeda okvira (popularno poznatog kao Flexbox). Ovaj vam modul omogućuje fleksibilnu kontrolu pozicioniranja elemenata na stranici, raspoređujući ih gotovo bilo gdje. Središnje poravnanje za Flexbox vrlo je jednostavan zadatak.Vanjski blok treba postaviti na display: flex, a unutarnji blok na margin: auto. I to je sve! Prelijepo, zar ne?
Vanjski (zaslon: savitljiv; širina: 200 px; visina: 200 px; ) .unutarnji (širina: 100 px; margina: auto; )
http://jsfiddle.net/c1bgfffq/14/
Nedostatak ove metode je što Flexbox podržavaju samo moderni preglednici.
Koju metodu trebam odabrati?
Morate krenuti od izjave problema:- Za okomito poravnavanje teksta bolje je koristiti okomite uvlake ili svojstvo line-height.
- Za apsolutno pozicionirane elemente s poznatom visinom (na primjer, ikone), metoda s negativno svojstvo margin-top .
- Za složenije slučajeve, kada je visina bloka nepoznata, trebate koristiti pseudoelement ili svojstvo transformacije.
- Pa, ako ste toliko sretni da ne trebate podržavati starije verzije IE preglednika, onda je, naravno, bolje koristiti Flexbox.
