pros

• Sadržaj može dinamički mijenjati visinu (visina nije definirana u CSS-u).
• Sadržaj se ne izrezuje ako za njega nema dovoljno prostora.

Minusi

• Ne radi u IE 7 ili manje
• Mnogo ugniježđenih oznaka

2. metoda

Ova metoda koristi apsolutno pozicioniranje diva, koje postavlja njegov vrh na 50% i njegov margin-top minus pola visine sadržaja. To implicira da objekt mora imati fiksnu visinu, koja je definirana u CSS stilovima.

Budući da je visina fiksna, možete postaviti preljev: auto; za div koji sadrži sadržaj, pa ako sadržaj ne stane, pojavit će se trake za pomicanje.

pros

• Radi u svim preglednicima.
• Nema nepotrebnog gniježđenja.

Minusi

• Kada nema dovoljno prostora, sadržaj nestaje (na primjer, div je unutar tijela, a korisnik je smanjio prozore, u tom slučaju se trake za pomicanje neće pojaviti.

3. metoda

U ovoj metodi ćemo omotati div sadržaja s drugim divom. Postavimo njegovu visinu na 50% (visina: 50%;), a donju marginu na polovicu visine (margin-bottom: -contentheight;). Sadržaj će obrisati float i biti centriran.

pros

• Radi u svim preglednicima.
• Kada nema dovoljno prostora (na primjer, kada je prozor smanjen) sadržaj nije izrezan, pojavit će se trake za pomicanje.

Minusi

• Mislim samo jedno: da se koristi dodatni prazan element.

4. metoda.

Ova metoda koristi svojstvo položaja: apsolutna; za divove s fiksnim dimenzijama (širina i visina). Zatim postavljamo koordinate na vrh: 0; dno: 0; ali budući da ima fiksnu visinu, ne može se rastegnuti i centriran je. Ovo je vrlo slično poznatoj metodi horizontalnog centriranja blok elementa fiksne širine (margina: 0 auto;).

pros

• Jako jednostavno.

Minusi

• Ne radi u Internet Exploreru
• Sadržaj će biti izrezan bez traka za pomicanje ako u spremniku nema dovoljno mjesta.

5. metoda

Ovu metodu možete koristiti za centriranje jednog retka teksta. Samo postavljamo visinu teksta (line-height) jednaku visini elementa (height). Nakon toga, linija će se prikazati u sredini.

pros

• Radi u svim preglednicima.
• Ne reže tekst ako ne stane.

Minusi

• Radi samo s tekstom (ne radi s blok elementima).
• Ako postoji više od jednog reda teksta, izgleda vrlo loše.

Ova tehnika je vrlo korisna za male stavke, kao što je centriranje teksta u gumb ili tekstualni okvir.

Sada kada znate kako postići vertikalno središnje poravnanje, napravimo jednostavnu web stranicu koja na kraju izgleda ovako:

Korak 1

Uvijek je dobro početi sa semantičkim označavanjem. Naša stranica će biti strukturirana na sljedeći način:

• #floater (za centriranje sadržaja)
• #centred (srednji element)
  • #strana
    • #logo
    • #nav (popis
    • #sadržaj
  • #bottom (za autorska prava i ostalo)

  Napišimo sljedeću html oznaku:

  Poduzeće

  • Dom
  • Proizvodi
  • Blog
  • Kontakt
  • Oko

  Naslov stranice

  Holistički reinženjering outsourcinga s dodanom vrijednošću nakon suradnje usmjerene na procese i dijeljenja ideja. Energetski pojednostavnite utjecajna tržišna niša putem omogućenih imperativa. Holistički prevladavaju premium inovacije nakon uvjerljivih scenarija. Besprijekorno iskoristite visoke standarde u ljudskom kapitalu s vrhunskim proizvedenim proizvodima. Izrazito sindicirajte sheme usklađene sa standardima prije robusnih vortala. Jedinstveno rekaptiualizirajte iskorištenu web-spremnost u odnosu na informacije izvan kutije.

  Naslov 2

  Učinkovito prihvatite prilagođenu web-spremnost, a ne procese usmjerene na kupca. Asertivno razvijajte imperative na više platformi u odnosu na proaktivne tehnologije. Pogodno osnažite multidisciplinarne meta-usluge bez sučelja za cijelo poduzeće. Pogodno pojednostavnite konkurentna strateška tematska područja s usredotočenim e-tržištima. Fosfluorescentno sindikalne zajednice svjetske klase vis-a-vis tržišta s dodanom vrijednošću. Na odgovarajući način ponovno osmislite holističke usluge prije robusnih e-usluga.

  Obavijest o autorskim pravima nalazi se ovdje

  Korak 2

  Sada ćemo napisati najjednostavniji CSS za pozicioniranje elemenata na stranici. Ovaj kod morate spremiti u svoju style.css datoteku. Na njega je veza registrirana u html datoteci.

  Html, tijelo (margina: 0; padding: 0; visina: 100%;) tijelo (pozadina: url ("page_bg.jpg") 50% 50% bez ponavljanja # FC3; font-family: Georgia, Times, serifi; ) #floater (položaj: relativan; float: lijevo; visina: 50%; margin-bottom: -200px; širina: 1px;) #centered (položaj: relativan; čist: lijevo; visina: 400px; širina: 80%; maks. -width: 800px; min-width: 400px; margina: 0 auto; pozadina: #fff; obrub: 4px solid # 666;) #bottom (položaj: apsolutni; donji: 0; desno: 0;) #nav (pozicija: apsolutno; lijevo: 0; gore: 0; dno: 0; desno: 70%; padding: 20px; margina: 10px;) #sadržaj (položaj: apsolutni; lijevo: 30%; desno: 0; gore: 0; dolje: 0; preljev: automatski; visina: 340px; padding: 20px; margina: 10px;)

  Prije nego što možemo naš sadržaj centrirati, moramo postaviti tijelo i visinu html-a na 100%. Budući da se visina izračunava bez unutarnjih i vanjskih margina (odmak i margina), postavljamo ih (margine) na 0 tako da nema klizača.

  Donji padding za "floater" -a element jednak je minus polovici visine sadržaja (400px), odnosno -200px;

  Vaša stranica bi sada trebala izgledati otprilike ovako:

  

  Širina #centered elementa je 80%. To čini našu stranicu već na malim ekranima i širim na velikim. većina stranica izgleda opsceno na novim širokim monitorima u gornjem lijevom kutu. Svojstva min-width i max-width također ograničavaju našu stranicu tako da ne izgleda preširoka ili preuska. Internet Explorer ne podržava ova svojstva. Za to morate postaviti fiksnu širinu.

  Budući da je #centered element postavljen na položaj: relativan, možemo koristiti apsolutno pozicioniranje elemenata unutar njega. Zatim postavite preljev: auto; za element #content, tako da se pojavljuju trake za pomicanje u slučaju da sadržaj ne stane.

  Korak 3

  I posljednja stvar koju ćemo učiniti je dodati neke stilove kako bi stranica izgledala malo privlačnije. Počnimo s jelovnikom.

  #nav ul (stil liste: nema; padding: 0; margina: 20px 0 0 0; uvlaka teksta: 0;) #nav li (padding: 0; margin: 3px;) #nav li a (prikaz: blok; background-color: # e8e8e8; padding: 7px; margina: 0; text-decoration: none; color: # 000; border-bottom: 1px solid #bbb; text-align: right;) #nav li a :: after ( sadržaj: "" "; boja: #aaa; font-weight: bold; display: inline; float: desno; margina: 0 2px 0 5px;) #nav li a: lebdeći, #nav li a: fokus (pozadina: # f8f8f8; border-bottom-color: # 777;) #nav li a: hover :: after (margin: 0 0 0 7px; color: # f93;) #nav li a: active (padding: 8px 7px 6px 7px;)

  Prva stvar koju smo učinili da bi izbornik izgledao bolje je uklonili markere tako što smo atribut stila popisa postavili na none, a također smo postavili padding i padding, jer su prema zadanim postavkama vrlo različiti u različitim preglednicima.

  Imajte na umu da smo tada naložili da se veze prikažu kao blok elementi. Sada, kada su prikazani, protežu se cijelom širinom elementa u kojem se nalaze.

  Još jedna zanimljiva stvar koju smo koristili za jelovnik je: prije i: poslije pseudo-nastava. Omogućuju vam da dodate bilo što prije i poslije elementa. Ovo je dobar način za dodavanje ikona ili simbola kao što je strelica na kraju svake veze. Ovaj trik ne radi u Internet Exploreru 7 i starijim verzijama.

  

  4. korak

  Na kraju, ali ne i najmanje važno, našem dizajnu ćemo dodati neke zaokrete za još više ljepote.

  #centered (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;) h1, h2, h3, h4, h5, h6 (familija fontova: Helvetica, Arial, sans- serif; težina fonta: normalna; boja: # 666;) h1 (boja: # f93; obrub dno: 1px čvrsti #ddd; razmak između slova: -0,05em; težina fonta: podebljano; margina vrh: 0; padding-top: 0;) #bottom (padding: 10px; font-size: 0.7em; color: # f03;) #logo (font-size: 2em; text-align: center; color: # 999;) #logo strong (font-weight: normal;) #logo span (display: block; font-size: 4em; line-height: 0.7em; color: # 666;) p, h2, h3 (line-height: 1.6em;) a (boja: # f03;)

  U ovim stilovima postavljamo zaobljene kutove za #centered element. U CSS3, to će biti odgovornost svojstva radijusa granice. Neki preglednici to još ne implementiraju, osim ako ne koristite prefikse -moz i -webkit za Mozilla Firefox i Safari / Webkit.

  

  Kompatibilnost

  Kao što ste vjerojatno pogodili, glavni izvor problema s kompatibilnošću je Internet Explorer:

  • Element #floater mora biti postavljen na svoju širinu.
  • IE 6 ima dodatni padding oko izbornika

  235.882 pregleda

  Centriranje elemenata okomito s CSS-om izazov je za programere. Međutim, postoji nekoliko metoda za njegovo rješavanje, koje su prilično jednostavne. Ova lekcija predstavlja 6 opcija za okomito centriranje sadržaja.

  Počnimo s općim opisom problema.

  Problem okomitog centriranja

  Horizontalno centriranje vrlo je jednostavno i lako. Kada je centrirani element umetnut, koristite svojstvo parent-align. Kada je element baziran na bloku, postavljamo njegovu širinu i automatski postavljamo lijevu i desnu marginu.

  Većina ljudi, kada koristi svojstvo text-align:, poziva se na svojstvo vertical-align da centrira okomito. Sve izgleda dovoljno logično. Ako ste koristili tablične predloške, vjerojatno ste uvelike koristili atribut valign, što učvršćuje uvjerenje da je vertikalno poravnanje pravi put.

  Ali atribut valign radi samo na ćelijama tablice. I svojstvo vertikalnog poravnanja vrlo je slično tome. Također utječe na ćelije tablice i neke inline elemente.

  Vrijednost svojstva vertical-align djeluje u odnosu na roditeljski inline element.

  • U retku teksta poravnanje se vrši u odnosu na visinu reda.
  • Poravnanje se koristi u ćeliji tablice u odnosu na vrijednost izračunatu posebnim algoritmom (obično se dobiva visina reda).

  Nažalost, svojstvo vertical-align nema utjecaja na elemente na razini bloka (na primjer, odlomke unutar elementa div). Ova situacija može dovesti do ideje da ne postoji rješenje za problem vertikalnog poravnanja.

  Ali postoje i druge metode za centriranje blok elemenata, čiji izbor ovisi o tome što je centrirano u odnosu na vanjski spremnik.

  Metoda visine linije

  Ova metoda radi kada želite okomito centrirati jedan redak teksta. Sve što trebate učiniti je postaviti visinu reda da bude veća od veličine fonta.

  Prema zadanim postavkama, slobodni prostor će biti ravnomjerno raspoređen na vrhu i na dnu teksta. I linija će biti centrirana okomito. Često je visina linije jednaka visini elementa.

  HTML:

  Željeni tekst

  CSS:

  #dijete (visina linije: 200px;)

  Ova metoda radi u svim preglednicima, iako se može koristiti samo za jedan redak. Vrijednost od 200 px u primjeru je odabrana proizvoljno. Može se koristiti bilo koja vrijednost veća od veličine fonta teksta.

  Centriranje slike pomoću visine linije

  Što ako je sadržaj slika? Hoće li gornja metoda djelovati? Odgovor leži u još jednoj liniji CSS-a.

  HTML:

  

  CSS:

  #parent (visina linije: 200px;) #parent img (vertical-align: middle;)

  Vrijednost svojstva line-height mora biti veća od visine slike.

  Metoda CSS tablica

  Gore je spomenuto da se svojstvo vertikalnog poravnanja odnosi na ćelije tablice, gdje odlično funkcionira. Naš element možemo prikazati kao ćeliju tablice i koristiti svojstvo vertical-align za okomito centriranje sadržaja.

  Bilješka: CSS tablica nije isto što i HTML tablica.

  HTML:

  Sadržaj

  CSS:

  #roditelj (prikaz: stol;) #dijete (prikaz: ćelija-tablica; okomito poravnanje: sredina;)

  Postavljamo tablični izlaz za roditeljski div, a ugniježđeni div izlazi kao ćelija tablice. Sada možete koristiti svojstvo vertical-align na unutarnjem spremniku. Sve u njemu bit će okomito centrirano.

  Za razliku od gornje metode, u ovom slučaju sadržaj može biti dinamičan, jer će element div promijeniti veličinu kako bi odgovarao svom sadržaju.

  Nedostatak ove metode je što ne radi u starijim verzijama IE-a. Moramo koristiti svojstvo display: inline-block za ugniježđeni spremnik.

  Apsolutno pozicioniranje i negativne margine

  Ova metoda također radi u svim preglednicima. Ali zahtijeva da se središnjem elementu zada visina.

  Primjer koda istovremeno izvodi horizontalno i okomito centriranje:

  HTML:

  Sadržaj

  CSS:

  #roditelj (položaj: relativan;) #dijete (položaj: apsolutni; vrh: 50%; lijevo: 50%; visina: 30%; širina: 50%; margina: -15% 0 0 -25%;)

  Prvo postavljamo vrstu pozicioniranja elemenata. Zatim, za ugniježđeni div, postavite gornja i lijeva svojstva na 50%, što je središte nadređenog. Ali gornji lijevi kut ugniježđenog elementa je centriran. Stoga ga trebate podići (pola visine) i pomaknuti ulijevo (pola širine), a onda će se središte poklopiti sa središtem roditeljskog elementa. Stoga je u ovom slučaju potrebno poznavanje visine elementa. Zatim postavite element na negativnu gornju i lijevu marginu jednaku polovici visine i širine.

  Ova metoda ne radi u svim preglednicima.

  Apsolutno pozicioniranje i istezanje

  Primjer koda izvodi vertikalno i horizontalno centriranje.

  HTML:

  Sadržaj

  CSS:

  #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 rastezanje ugniježđenog elementa na sva 4 ruba roditeljskog elementa postavljanjem gornjih, donjih, desnih i lijevih svojstava na 0.

  Postavljanjem na margine automatskog oblikovanja na svim stranama postavit će se jednake vrijednosti na sve 4 strane i naš ugniježđeni div element će biti centriran na roditeljskom elementu.

  Nažalost, ova metoda ne radi u IE7 i niže.

  Jednake gornje i donje margine

  Ova metoda eksplicitno postavlja jednake margine iznad i ispod nadređenog elementa.

  HTML:

  Sadržaj

  CSS:

  #roditelj (ispun: 5% 0;) #dijete (ispun: 10% 0;)

  Primjer CSS koda postavlja gornju i donju marginu za oba elementa. Za ugniježđeni element, postavljanje dopuna poslužit će za okomito centriranje. A padding roditeljskog elementa će centrirati ugniježđeni element u njemu.

  Relativne jedinice se koriste za dinamičku promjenu veličine stavki. A za apsolutne jedinice morat će se izvršiti izračuni.

  Na primjer, ako je roditeljski element visok 400px, a ugniježđeni element 100px, tada su potrebne gornje i donje margine od 150px.

  150 + 150 + 100 = 400

  Korištenje % omogućuje da se izračuni prepuste pregledniku.

  Ova metoda djeluje posvuda. Nedostatak je potreba za izračunima.

  Bilješka: Ova metoda radi tako što postavlja vanjski padding elementa. Također možete koristiti margine unutar elementa. Odluku o korištenju margina ili paddinga treba donijeti ovisno o specifičnostima projekta.

  Plutajući div

  Ova metoda koristi prazan element div koji pluta i pomaže kontrolirati položaj našeg ugniježđenog elementa u dokumentu. Imajte na umu da je plutajući div pozicioniran ispred našeg ugniježđenog elementa u HTML kodu.

  HTML:

  Sadržaj

  CSS:

  #parent (visina: 250px;) #floater (float: lijevo; visina: 50%; širina: 100%; margin-bottom: -50px;) #child (čisto: oboje; visina: 100px;)

  Prazni div pomaknemo lijevo ili desno i postavimo njegovu visinu na 50% roditeljskog elementa. Na taj način će ispuniti gornju polovicu roditelja.

  Budući da je ovaj div plutajući, uklonjen je iz normalnog tijeka dokumenta i moramo otkazati prelamanje teksta za ugniježđeni element. Primjer koristi clear: oboje, ali je dovoljno koristiti isti smjer kao pomak plutajućeg praznog elementa div.

  Gornja granica ugniježđenog elementa div je izravno ispod donje granice praznog elementa div. Moramo pomaknuti ugniježđeni element gore za polovicu visine plutajućeg praznog elementa. Da biste riješili problem, upotrijebite negativnu vrijednost za svojstvo margin-bottom za plutajući prazan element div.

  Ova metoda također radi u svim preglednicima. Međutim, njegova upotreba zahtijeva dodatni prazan element div i poznavanje visine ugniježđenog elementa.

  Zaključak

  Sve opisane metode su jednostavne za korištenje. Poteškoća je u tome što nijedan od njih nije prikladan za sve slučajeve. Potrebno je analizirati projekt i odabrati onaj koji najbolje odgovara zahtjevima.

  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.
  Kao ilustraciju, razmotrite sljedeći primjer.

  

  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:

  1. postaviti relativni položaj vanjskog bloka, a unutarnjeg - apsolutno;
  2. unutarnjem bloku dodajte pravila top: 0 i bottom: 0, zbog čega se proteže na punu visinu vanjskog bloka;
  3. postavljeno na auto za okomiti padding unutarnjeg bloka.
  .vanjski (položaj: relativan;) .unutarnji (visina: 100px; položaj: apsolutni; vrh: 0; dno: 0; margina: automatski 0;)
  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 roditeljski element, vrijednost od 50% bila bi 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. Poravnavanje 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.

  Oznake: Dodaj oznake

  Ako izrežete bilo koju web stranicu temeljenu na html-u, vidjet ćete određenu strukturu sloj-po-sloj. Štoviše, po svom će izgledu biti sličan lisnatom tijestu. Ako tako mislite, onda najvjerojatnije niste dugo jeli. Dakle, prvo nahranite svoju glad, a zatim ćemo vam pokazati kako centrirati div sloj na svojoj web-lokaciji:

  Prednosti označavanja

  Postoje dvije glavne vrste izgradnje strukture stranice:

  • Tablični;
  • Blocky.

  Raspored tablica je dominantan od početka interneta. Njegove prednosti uključuju točnost navedenog pozicioniranja. Ali, ipak, ima očite nedostatke. Glavni su volumen koda i niska brzina preuzimanja.

  Kada koristite tablični izgled, web stranica se neće prikazati dok se potpuno ne učita. Dok se kod korištenja div blokova elementi prikazuju odmah.

  Osim velike brzine učitavanja, blok-bazirana konstrukcija stranice omogućuje nekoliko puta smanjenje količine html koda. Uključujući korištenje CSS klasa.

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

  Izgradnja blokova na temelju oznaka

  također se nazivaju sloj po sloj, a sami blokovi su slojevi. To je zato što se pri korištenju određenih vrijednosti svojstava mogu naslagati jedan na drugi, poput slojeva u Photoshopu.

  Pomagala za pozicioniranje

  U blok rasporedu, pozicioniranje slojeva najbolje je izvesti pomoću kaskadnih stilskih listova. Glavno CSS svojstvo odgovorno za pozicioniranje

  , je plovak.
  Sintaksa svojstva:
  plutati: lijevo | desno | nijedan | naslijediti,
  Gdje:

  • lijevo - poravnava element s lijeve strane zaslona. Protok oko ostalih elemenata događa se s desne strane;
  • desno - poravnanje udesno, tok oko ostalih elemenata - lijevo;
  • nema - nije dopušteno zamatanje;
  • naslijediti - naslijediti vrijednost roditeljskog elementa.

  Pogledajmo lagani primjer pozicioniranja divova pomoću ovog svojstva:

  Lijevi blok

  Desni blok

  
  

  Sada pokušajmo upotrijebiti isto svojstvo za postavljanje trećeg diva u središte stranice. Ali, nažalost, float nema središnju vrijednost. A kada postavite novi blok na vrijednost poravnanja udesno ili ulijevo, on se pomiče u navedenom smjeru. Stoga ostaje samo postaviti float: lijevo na sva tri bloka:

  
  

  Ali ni ovo nije najbolja opcija. Kada se prozor smanji, svi slojevi se poredaju u jedan red okomito, a kada se poveća veličina, lijepe se za lijevi rub prozora. Stoga je potreban bolji način za centriranje diva.

  Slojevi za centriranje

  U sljedećem primjeru koristit ćemo sloj kontejnera u koji ćemo smjestiti ostale elemente. To rješava problem pomicanja blokova jedan u odnosu na drugi kada se promijeni veličina prozora. Centriranje spremnika u sredini vrši se postavljanjem svojstava margine na nulu za gornju marginu i auto na stranama (margina: 0 auto):

  Lijevi blok

  Centralni blok

  Desni blok

  
  

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

  Nakon promjene, svi blokovi će se poredati strogo u nizu u sredini. Njihov se položaj neće promijeniti ni u jednoj veličini prozora preglednika. Ovako izgleda okomito centriranje diva:

  
  

  U sljedećem primjeru koristili smo niz novih css svojstava za centriranje slojeva unutar spremnika:

  
  

  Kratak opis css svojstava i njihovih vrijednosti koje smo koristili u ovom primjeru da centriramo div unutar diva:

  • display: inline-block - Poravnava blok element s linijom i osigurava da je omotan oko drugog elementa.
  • vertikalno poravnanje: sredina - poravnava element u sredini u odnosu na roditelj;
  • margin-left - postavlja marginu lijevo.

  Kako napraviti vezu iz sloja

  Čudno zvuči, ali ovo je moguće. Ponekad može biti potreban div blok kao poveznica pri postavljanju raznih vrsta izbornika. Pogledajmo praktičan primjer implementacije sloja veze:

  Link na našu stranicu

  
  

  U ovom primjeru, koristeći line display: block, postavljamo vezu na vrijednost elementa bloka. A da cijela visina bloka div postane veza, postavite visinu: 100%.

  Skrivanje i prikazivanje blok elemenata

  Blok elementi pružaju više mogućnosti za proširenje funkcionalnosti sučelja nego zastarjeli izgled tablice. Često se događa da je dizajn web stranice jedinstven i prepoznatljiv. Ali za takvu ekskluzivu morate platiti nedostatkom slobodnog prostora.

  To se posebno odnosi na početnu stranicu koja ima najvišu cijenu postavljanja oglasa. Stoga nastaje problem gdje "ugurati" još jedan reklamni banner. Poravnavanje diva sa središtem stranice nije dovoljno!

  Racionalnije rješenje je da neki blok bude skriven. Evo jednostavnog primjera takve implementacije:

  Ovo je čarobni gumb. Klikom na njega će se sakriti ili prikazati skriveni blok.

  
  

  U ovom se primjeru položaj div blokova ne mijenja ni na koji način. Ovo je jednostavna JavaScript funkcija koja mijenja vrijednost svojstva css prikaza nakon klika na gumb ( onclick događaj).

  Sintaksa prikaza:
  prikaz: blok | inline | inline-block | umetnuta tablica | stavka popisa | nijedan | uhodavanje | stol | tablica-naslov | ćelija tablice | tablica-stupac-grupa | tablica-stupac | tablica-podnožje-grupa | grupa zaglavlja tablice | tablica-red | tablica-red-grupa

  Kao što možete vidjeti, ovo svojstvo može imati mnogo vrijednosti. Stoga je vrlo koristan i može se koristiti za pozicioniranje elemenata. U jednom od prethodnih primjera, koristeći jednu od njegovih vrijednosti ( inline-blok) implementirali smo središnje poravnanje divova unutar divova.

  Koristili smo dvije vrijednosti za svojstvo prikaza kako bismo sakrili i prikazali sloj.

  Horizontalno i okomito poravnavanje elemenata može se izvesti na različite načine. Izbor metode ovisi o vrsti elementa (blok ili inline), o vrsti pozicioniranja, dimenzijama itd.

  1. Horizontalno poravnanje prema sredini bloka/stranice

  1.1. Ako blok ima širinu:

  div (širina: 300px; margina: 0 auto; / * centrirajte element vodoravno unutar roditeljskog bloka * /)

  Ako želite poravnati inline element na ovaj način, potrebno ga je postaviti na prikaz: block;

  1.2. Ako je blok ugniježđen u drugi blok i za njega nije postavljena/postavljena širina:

  .wrapper (poravnanje teksta: središte;)

  1.3. Ako blok ima širinu i treba ga fiksirati na središte roditeljskog bloka:

  .wrapper (položaj: relativan; / * postavite relativno pozicioniranje za roditeljski okvir, tako da kasnije možemo apsolutno pozicionirati okvir unutar njega * /) .box (širina: 400px; položaj: apsolutna; lijevo: 50%; margin- lijevo: -200px; / * pomaknite blok ulijevo za udaljenost jednaku polovici njegove širine * /)

  1.4. Ako za blokove nije navedena širina, možete centrirati pomoću roditeljskog bloka omota:

  .wrapper (tekst-align: center; / * pozicionirajte sadržaj bloka u centar * /) .box (prikaz: inline-block; / * rasporedite blokove u red vodoravno * / margin-right: -0,25em ; / * uklonite desnu uvlaku između blokova * /)

  2. Vertikalno poravnanje

  2.1. Ako se tekst proteže u jedan redak, na primjer, za gumbe i stavke izbornika:

  .button (visina: 50px; visina linije: 50px;)

  2.2. Za vertikalno poravnanje bloka unutar roditeljskog bloka:

  .wrapper (pozicija: relativna;) .box (visina: 100px; pozicija: apsolutna; vrh: 50%; margina: -50px 0 0 0;)

  2.3. Vertikalno poravnanje prema vrsti tablice:

  .wrapper (prikaz: tablica; širina: 100%;) .box (prikaz: tablica-ćelija; visina: 100px; poravnanje teksta: središte; okomito poravnanje: sredina;)

  2.4. Ako blok ima širinu i visinu i mora biti centriran na roditeljski blok:

  .wrapper (pozicija: relativna;) .box (visina: 100px; širina: 100px; položaj: apsolutna; vrh: 0; desno: 0; dolje: 0; lijevo: 0; margina: auto; preljev: auto; / * do sadržaj nije puzao * /)

  2.5. Apsolutno pozicioniranje u sredini stranice/bloka pomoću CSS3 transformacije:

  ako je element dimenzioniran

  div (širina: 300px; / * postavi širinu bloka * / visina: 100px; / * postavi visinu bloka * / transformiraj: prevedi (-50%, -50%); položaj: apsolutna; vrh: 50%; lijevo: 50% ;)

  ako element nije dimenzioniran i nije prazan

  Neki tekst ovdje

  h1 (margina: 0; transformacija: prevođenje (-50%, -50%); pozicija: apsolutna; vrh: 50%; lijevo: 50%;)