pros

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

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 njegovu marginu-top minus pola visine sadržaja. Ovo implicira da objekat mora imati fiksnu visinu, koja je definisana u CSS stilovima.

Pošto je visina fiksna, možete podesiti overflow: auto; za div koji sadrži sadržaj, pa ako se sadržaj ne uklapa, pojavit će se trake za pomicanje.

pros

• Radi u svim pretraživačima.
• Nema nepotrebnog gniježđenja.

Minusi

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

3rd method

U ovoj metodi ćemo omotati sadržaj div sa drugim div. Postavimo njegovu visinu na 50% (visina: 50%;), a donju marginu na polovinu visine (margin-bottom: -contentheight;). Sadržaj će očistiti float i biti centriran.

pros

• Radi u svim pretraživačima.
• Kada nema dovoljno prostora (na primjer, kada se prozor smanji) sadržaj nije isječen, pojavit će se trake za pomicanje.

Minusi

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

4. metod.

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

pros

• Veoma jednostavno.

Minusi

• Ne radi u Internet Exploreru
• Sadržaj će biti isječen bez traka za pomicanje ako nema dovoljno prostora u kontejneru.

5. metod

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

pros

• Radi u svim pretraživačima.
• Ne seče tekst ako ne stane.

Minusi

• Radi samo sa tekstom (ne radi sa 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 dugme ili okvir za tekst.

Sada kada znate kako postići vertikalno centralno 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 (centralni element)
  • #side
    • #logo
    • #nav (list
    • #content
  • #bottom (za autorska prava i ostalo)

  Napišimo sljedeće html oznake:

  Kompanija

  • Dom
  • Proizvodi
  • Blog
  • Kontakt
  • O

  Naslov stranice

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

  Naslov 2

  Efikasno 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 interfejsa za cijelo preduzeće. Pogodno pojednostavite konkurentna strateška tematska područja sa fokusiranim e-tržištima. Fosfluorescentno sindikalne zajednice svjetske klase vis-a-vis tržišta s dodanom vrijednošću. Na odgovarajući način ponovo 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. Morate sačuvati ovaj kod u vašem style.css fajlu. Na njega je veza registrovana u html datoteci.

  Html, tijelo (margina: 0; dopuna: 0; visina: 100%;) tijelo (pozadina: url ("page_bg.jpg") 50% 50% bez ponavljanja # FC3; porodica fontova: Georgia, Times, serifi; ) #floater (položaj: relativan; float: lijevo; visina: 50%; margin-bottom: -200px; širina: 1px;) #centrirano (položaj: relativan; čist: lijevo; visina: 400px; širina: 80%; maks. -width: 800px; min-width: 400px; margina: 0 auto; pozadina: #fff; granica: 4px čvrsta # 666;) #bottom (položaj: apsolutna; donja: 0; desno: 0;) #nav (pozicija: apsolutno; lijevo: 0; gore: 0; dolje: 0; desno: 70%; padding: 20px; margina: 10px;) #sadržaj (pozicija: apsolutna; lijevo: 30%; desno: 0; gore: 0; dolje: 0; overflow: auto; visina: 340px; padding: 20px; margina: 10px;)

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

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

  Vaša stranica bi sada trebala izgledati otprilike ovako:

  

  Širina #centered elementa je 80%. Ovo čini našu stranicu već na malim ekranima i širim na velikim ekranima. većina sajtova izgleda opsceno na novim širokim monitorima u gornjem levom uglu. 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.

  Pošto je #centered element postavljen na položaj: relativan, možemo koristiti apsolutno pozicioniranje elemenata unutar njega. Zatim postavite overflow: 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; margina: 3px;) #nav li a (prikaz: blok; background-color: # e8e8e8; padding: 7px; margina: 0; text-decoration: nijedna; boja: # 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 uradili da bi meni izgledao bolje je da smo uklonili markere tako što smo atribut stila liste postavili na none, kao i da smo postavili padding i padding, pošto su oni po podrazumevanoj vrednosti veoma različiti u različitim pretraživačima.

  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 meni je: prije i: poslije pseudo-klasa. Omogućuju vam da dodate bilo šta prije i poslije elementa. Ovo je dobar način da dodate ikone ili simbole kao što je strelica na kraju svake veze. Ovaj trik ne radi u Internet Exploreru 7 i starijim verzijama.

  

  Korak 4

  Na kraju, ali ne i najmanje važno, dodaćemo neke zaokrete našem dizajnu 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; font-weight: normal; color: # 666;) h1 (boja: # f93; border-bottom: 1px solid #ddd; prored slova: -0,05em; font-weight: bold; margin-top: 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 uglove za #centered element. U CSS3, svojstvo radijusa granice će biti odgovorno za ovo. Ovo još nije implementirano u nekim pretraživačima, osim ako ne koristite prefikse -moz i -webkit za Mozilla Firefox i Safari / Webkit.

  

  Kompatibilnost

  Kao što ste verovatno pretpostavili, glavni izvor problema kompatibilnosti je Internet Explorer:

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

  235,882 pregleda

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

  Počnimo s općim opisom problema.

  Problem vertikalnog centriranja

  Centriranje horizontalno je vrlo jednostavno i lako. Kada je centrirani element inline, 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 tabelarne predloške, vjerovatno ste u velikoj mjeri 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 je vrlo slično njemu. Takođe utiče na ćelije tabele i neke inline elemente.

  Vrijednost svojstva vertikalnog poravnanja djeluje u odnosu na roditeljski inline element.

  • U redu teksta, poravnanje se vrši u odnosu na visinu reda.
  • Poravnanje se koristi u ćeliji tabele u odnosu na vrednost izračunatu posebnim algoritmom (obično se dobija visina reda).

  Nažalost, svojstvo vertical-align nema efekta na elemente na nivou bloka (na primjer, pasuse 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 kontejner.

  Metoda visine linije

  Ova metoda radi kada želite okomito centrirati jedan red teksta. Sve što treba da uradite je da podesite 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:

  #child (visina linije: 200px;)

  Ova metoda radi u svim pretraživačima, iako se može koristiti samo za jedan red. 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

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

  HTML:

  

  CSS:

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

  Vrijednost svojstva visine linije mora biti veća od visine slike.

  Metoda CSS tabela

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

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

  HTML:

  Sadržaj

  CSS:

  #parent (display: table;) #child (display: table-cell; vertical-align: middle;)

  Postavljamo tabelarni izlaz za roditeljski div, a ugniježđeni div izlazi kao ćelija tabele. Sada možete koristiti svojstvo vertical-align na unutrašnjem kontejneru. Sve u njemu će biti vertikalno centrirano.

  Za razliku od gornje metode, u ovom slučaju sadržaj može biti dinamičan, jer će div element 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 kontejner.

  Apsolutno pozicioniranje i negativne margine

  Ova metoda također radi u svim pretraživačima. Ali to zahtijeva da se centralnom elementu da visina.

  Primjer koda izvodi horizontalno i vertikalno centriranje u isto vrijeme:

  HTML:

  Sadržaj

  CSS:

  #roditelj (pozicija: relativna;) #dijete (pozicija: apsolutna; vrh: 50%; lijevo: 50%; visina: 30%; širina: 50%; margina: -15% 0 0 -25%;)

  Prvo postavljamo tip pozicioniranja elemenata. Zatim, za ugniježđeni div, postavite gornja i lijeva svojstva na 50%, što je centar nadređenog. Ali gornji lijevi ugao ugniježđenog elementa je centriran. Stoga ga trebate podići (pola visine) i pomaknuti ulijevo (pola širine), a tada će se središte poklopiti sa središtem roditeljskog elementa. Dakle, znanje o visini elementa je neophodno u ovom slučaju. Zatim postavite element na negativnu gornju i lijevu marginu jednaku polovini visine i širine, respektivno.

  Ova metoda ne radi u svim pretraživačima.

  Apsolutno pozicioniranje i istezanje

  Primjer koda izvodi vertikalno i horizontalno centriranje.

  HTML:

  Sadržaj

  CSS:

  #roditelj (pozicija: relativna;) #dijete (pozicija: apsolutna; gore: 0; dolje: 0; lijevo: 0; desno: 0; širina: 50%; visina: 30%; margina: auto;)

  Ideja iza ove metode je da se ugniježđeni element rastegne na sve 4 granice 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 starijim verzijama.

  Jednake gornje i donje margine

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

  HTML:

  Sadržaj

  CSS:

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

  Primjer CSS koda postavlja gornju i donju marginu za oba elementa. Za ugniježđeni element, postavljanje dopuna će služiti za vertikalno 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 mjerne jedinice, morat će se izvršiti prorač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šćenje % omogućava da se proračuni prepuste pretraživaču.

  Ova metoda djeluje svuda. Loša strana je potreba za prorač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 u kontroli pozicije 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 (clear: oboje; visina: 100px;)

  Prazni div pomičemo lijevo ili desno i postavljamo njegovu visinu na 50% roditeljskog elementa. Na ovaj način će ispuniti gornju polovinu roditelja.

  Pošto je ovaj div plutajući, uklonjen je iz normalnog toka dokumenta i moramo da poništimo prelamanje teksta za ugniježđeni element. U primjeru se koristi clear: oboje, ali je dovoljno koristiti isti smjer kao pomak plutajućeg praznog elementa div.

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

  Ova metoda također radi u svim pretraživačima. Međutim, njegovo korištenje 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 projekat i odabrati onaj koji najbolje odgovara zahtjevima.

  Mislim da su mnogi od vas koji su radili layout naišli na potrebu da se elementi poravnaju okomito i znaju kakve poteškoće nastaju kada se element poravna sa središtem.

  Da, za vertikalno poravnanje, CSS ima posebno svojstvo vertikalnog poravnanja sa više vrednosti. U praksi, međutim, uopće ne funkcionira kako se očekivalo. Pokušajmo to shvatiti.

  
  Uporedimo 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, od kojih je jedan ugniježđen u drugi. Hajde da im damo odgovarajuće klase - spoljašnje i unutrašnje.

  
  Izazov je poravnati unutrašnji element sa središtem vanjskog elementa.

  Prvo, razmotrite slučaj kada su dimenzije vanjske i unutarnje jedinice poznato... Unutarnjem elementu dodamo display: inline-block, a vanjskom elementu text-align: centar i vertikalno-align: sredinu.

  Sjećam se da se poravnanje odnosi samo na elemente koji imaju inline ili inline-block način prikaza.

  Dajmo blokovima veličine i boje pozadine da vidimo njihove granice.

  Vanjski (širina: 200px; visina: 200px; poravnanje teksta: centar; vertikalno poravnanje: sredina; boja pozadine: #ffc;) .unutrašnji (prikaz: inline-block; širina: 100px; visina: 100px; boja pozadine : #fcc;)
  Nakon primjene stilova, vidjet ćemo da je unutrašnji blok poravnat vodoravno, ali ne i okomito:
  http://jsfiddle.net/c1bgfffq/

  Zašto se to dogodilo? Poenta je da svojstvo vertical-align utiče na poravnanje. sam element, a ne njegov sadržaj(osim kada se odnosi na ćelije tabele). Stoga, primjena ove osobine na vanjski element nije učinila ništa. Štaviše, primjena ovog svojstva na unutrašnji element također neće učiniti ništa, budući da su inline blokovi vertikalno 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 detaljnije pogledati svaki od njih.

  Poravnajte sa stolom

  Prvo rješenje koje vam pada na pamet je zamjena vanjskog bloka stolom sa jednom ćelijom. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutrašnji blok.
  
  http://jsfiddle.net/c1bgfffq/1/

  Očigledan nedostatak ovog rješenja je što je sa stanovišta semantike pogrešno koristiti tabele za poravnanje. Drugi nedostatak je taj što da biste kreirali tabelu, morate dodati još jedan element oko vanjskog bloka.

  Prvi minus se može djelomično ukloniti zamjenom tabele i td tagova sa div i postavljanjem načina prikaza tabele u CSS-u.

  
  .outer-wrapper (display: table;) .outer (display: table-cell;)
  Ipak, vanjski blok će i dalje ostati stol sa svim posljedicama koje proizilaze.

  Poravnajte s uvlakama

  Ako su poznate visine unutrašnjeg i vanjskog okvira, tada se poravnanje može postaviti pomoću vertikalnog obruba unutrašnjeg okvira pomoću formule: (H vanjski - H unutarnji) / 2.

  Vanjska (visina: 200px;) .unutrašnja (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 sa visinom linije

  Ako znate da unutrašnji blok ne bi trebao zauzimati više od jednog reda teksta, onda možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da se sadržaj unutrašnjeg bloka ne bi trebao premotati u drugi red, preporučuje se da dodate i white-space: nowrap i overflow: skrivena pravila.

  Vanjski (visina: 200px; visina linije: 200px;) .unutrašnji (razmak: nowrap; prelijevanje: skriveno;)
  http://jsfiddle.net/c1bgfffq/12/

  Ovu tehniku ​​možete koristiti i za poravnavanje teksta u više redova tako što ćete redefinirati vrijednost visine reda za unutrašnji blok i dodati display: inline-block i vertical-align: srednja pravila.

  Vanjska (visina: 200px; visina linije: 200px;) .unutrašnja (visina linije: normalna; prikaz: inline-block; vertikalno poravnanje: sredina;)
  http://jsfiddle.net/c1bgfffq/15/

  Nedostatak ove metode je što visina vanjskog bloka mora biti poznata.

  Stretch poravnanje

  Ova metoda se može koristiti kada je visina vanjske jedinice nepoznata, ali je poznata visina unutrašnje jedinice.

  Za ovo vam je potrebno:

  1. postaviti relativnu poziciju vanjskog bloka, a unutrašnjeg - apsolutno;
  2. dodajte pravila gornje: 0 i donje: 0 unutrašnjem bloku, zbog čega se proteže do pune visine vanjskog bloka;
  3. postavljeno na auto za vertikalni padding unutrašnjeg bloka.
  .vanjski (pozicija: relativna;) .unutrašnja (visina: 100px; pozicija: apsolutna; vrh: 0; dno: 0; margina: auto 0;)
  http://jsfiddle.net/c1bgfffq/4/

  Suština ove tehnike je da specificiranje visine za rastegnuti i apsolutno pozicionirani okvir prisiljava pretraživač da izračuna vertikalne margine u jednakim proporcijama kada je postavljeno na automatski.

  Poravnavanje sa 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 unutrašnjeg bloka.

  Potrebno je postaviti relativnu poziciju vanjskog bloka, a unutrašnjeg - apsolutno. Zatim trebate gurnuti unutrašnju kutiju do polovice visine gornje strane vanjske kutije: 50% i podići je do pola njene visine margin-top: -H unutrašnja / 2.

  Vanjski (pozicija: relativna;) .unutrašnja (visina: 100px; pozicija: apsolutna; vrh: 50%; margin-top: -50px;)
  http://jsfiddle.net/c1bgfffq/13/

  Nedostatak ove metode je što visina unutrašnje jedinice mora biti poznata.

  Usklađivanje sa transformacijom

  Ova metoda je slična prethodnoj, ali se može primijeniti kada je visina unutrašnje jedinice nepoznata. U ovom slučaju, umjesto postavljanja negativnog dodavanja piksela, možete koristiti svojstvo transformacije i pomjeriti unutrašnji blok prema gore pomoću funkcije translateY i vrijednosti od -50%.

  Vanjski (položaj: relativan;) .unutrašnji (pozicija: apsolutni; vrh: 50%; transformacija: translateY (-50%);)
  http://jsfiddle.net/c1bgfffq/9/

  Zašto postotak nije mogao biti postavljen u prethodnoj metodi? Budući da su procentualne vrijednosti svojstva margine izračunate u odnosu na roditeljski element, vrijednost od 50% bila bi polovina visine vanjskog okvira, a morali smo podići unutrašnji okvir za polovinu njegove vlastite visine. Svojstvo transformacije je pravo za ovo.

  Nedostatak ove metode je što se ne može primijeniti ako unutrašnji blok ima apsolutno pozicioniranje.

  Poravnajte sa Flexboxom

  Najmoderniji način za vertikalno poravnanje je korištenje fleksibilnog rasporeda kutije (popularno poznatog kao Flexbox). Ovaj modul vam omogućava da fleksibilno kontrolišete pozicioniranje elemenata na stranici, postavljajući ih gotovo onako kako želite. Centralno poravnanje za Flexbox je vrlo jednostavan zadatak.

  Vanjski okvir treba postaviti na display: flex, a unutrašnji okvir treba postaviti na margin: auto. I to je sve! Prelepo, zar ne?

  Vanjski (prikaz: flex; širina: 200px; visina: 200px;) .unutrašnji (širina: 100px; margina: auto;)
  http://jsfiddle.net/c1bgfffq/14/

  Nedostatak ove metode je što Flexbox podržavaju samo moderni pretraživači.

  Koji način odabrati?

  Potrebno je poći od iskaza problema:
  • Za vertikalno poravnanje teksta, bolje je koristiti vertikalni padding ili svojstvo line-height.
  • Za apsolutno pozicionirane elemente sa poznatom visinom (poput ikona), negativno svojstvo margin-top je idealno.
  • Za složenije slučajeve, kada je visina bloka nepoznata, trebate koristiti pseudo-element ili svojstvo transformacije.
  • Pa, ako ste te sreće da ne morate podržavati starije verzije IE-a, onda je naravno bolje koristiti Flexbox.

  Oznake: Dodaj oznake

  Ako izrežete bilo koju web stranicu zasnovanu na html-u, tada ćete vidjeti određenu strukturu sloj po sloj. Štoviše, po izgledu će biti sličan lisnatom tijestu. Ako tako mislite, onda najvjerovatnije niste jeli dugo vremena. Zato prvo nahranite svoju glad, a onda ćemo vam pokazati kako da centrirate div sloj na vašoj web lokaciji:

  Prednosti označavanja

  Postoje dvije glavne vrste izgradnje strukture lokacije:

  • Tabularni;
  • Blocky.

  Raspored tablica je dominantan od početka interneta. Njegove prednosti uključuju tačnost datog pozicioniranja. Ali, ipak, ima očigledne nedostatke. Glavni su volumen koda i mala brzina preuzimanja.

  Kada koristite tabelarni izgled, web stranica neće biti prikazana dok se potpuno ne učita. Dok kada se koriste div blokovi, elementi se prikazuju odmah.

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

  Međutim, tabelarni izgled treba koristiti za strukturiranje prikaza podataka na stranici. Klasičan primjer njegove upotrebe je prikazivanje tabela.

  Blok zgrada zasnovana na oznakama

  nazivaju se i sloj po sloj, a sami blokovi su slojevi. To je zato što kada se koriste određene vrijednosti svojstava, one se mogu naslagati jedna na drugu, poput slojeva u Photoshopu.

  Pomagala za pozicioniranje

  U blok rasporedu, pozicioniranje slojeva je najbolje uraditi pomoću kaskadnih stilova. Glavno CSS svojstvo odgovorno za pozicioniranje

  , je plutajući.
  Sintaksa svojstva:
  float: lijevo | desno | nijedan | nasljediti,
  gdje:

  • lijevo - poravnava element s lijeve strane ekrana. Protok oko ostalih elemenata odvija se na desnoj strani;
  • desno - poravnanje udesno, tok oko ostalih elemenata - lijevo;
  • nema - nije dozvoljeno omotavanje;
  • naslijediti - naslijediti vrijednost roditeljskog elementa.

  Pogledajmo lagani primjer pozicioniranja divova koristeći ovo svojstvo:

  Lijevi blok

  Desni blok

  
  

  Pokušajmo sada koristiti isto svojstvo da pozicioniramo treći div u centar 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 određenom smjeru. Stoga ostaje samo postaviti float: lijevo na sva tri bloka:

  
  

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

  Centrirajući slojevi

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

  Lijevi blok

  Centralni blok

  Desni blok

  
  

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

  Nakon promjene, svi blokovi će biti poređani striktno u nizu u sredini. Njihova pozicija se neće promijeniti ni u jednoj veličini prozora pretraživača. Ovako izgleda vertikalno centriranje diva:

  
  

  U sljedećem primjeru koristili smo niz novih css svojstava da centriramo slojeve unutar kontejnera:

  
  

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

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

  Kako napraviti link od sloja

  Čudno zvuči, ali ovo je moguće. Ponekad div blok kao veza može biti potreban kada se postavljaju različite vrste menija. 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 bi cijela visina div bloka postala veza, postavite visinu: 100%.

  Skrivanje i prikazivanje blok elemenata

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

  Ovo se posebno odnosi na početnu stranicu, koja ima najveću cijenu postavljanja oglasa. Stoga postoji problem gdje "gurnuti" još jedan reklamni baner. Poravnavanje diva sa središtem stranice nije dovoljno!

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

  Ovo je magično dugme. Klikom na njega će se sakriti ili prikazati skriveni blok.

  
  

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

  Sintaksa prikaza:
  displej: blok | inline | inline-block | inline-table | stavka liste | nijedan | uhodavanje | stol | table-caption | ćelija tablice | tablica-kolona-grupa | tablica-kolona | table-footer-group | grupa zaglavlja tabele | tablica-red | tabela-red-grupa

  Kao što vidite, 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-block) implementirali smo divove za poravnanje centra unutar divova.

  Koristili smo dvije vrijednosti za svojstvo prikaza da sakrijemo i prikažemo sloj.

  Horizontalno i vertikalno poravnanje 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 horizontalno unutar roditeljskog bloka * /)

  Ako želite da poravnate umetnuti element na ovaj način, potrebno ga je postaviti da prikaže: block;

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

  .wrapper (poravnanje teksta: centar;)

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

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

  1.4. Ako za blokove nije navedena širina, možete centrirati koristeći roditeljski blok omotača:

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

  2. Vertikalno poravnanje

  2.1. Ako se tekst prostire na jedan red, na primjer, za dugmad i stavke menija:

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

  2.2. Da biste vertikalno poravnali blok unutar roditeljskog bloka:

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

  2.3. Vertikalno poravnanje prema vrsti stola:

  .wrapper (prikaz: tabela; širina: 100%;) .box (prikaz: ćelija-tabela; visina: 100px; poravnanje teksta: centar; vertikalno 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; pozicija: apsolutna; vrh: 0; desno: 0; dolje: 0; lijevo: 0; margina: auto; preljev: auto; / * do sadržaj nije puzao * /)

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

  ako je element dimenzionisan

  div (širina: 300px; / * postavite širinu bloka * / visinu: 100px; / * postavite visinu bloka * / transformirajte: prevedite (-50%, -50%); pozicija: apsolutna; vrh: 50%; lijevo: 50% ;)

  ako element nije dimenzioniran i nije prazan

  Neki tekst ovdje

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