Mislim da su se mnogi od vas koji su imali posla sa rasporedom naišli na potrebu da se elementi poravnaju okomito i znaju poteškoće koje nastaju kada se element poravna sa središtem.
Da, postoji posebno viševrijedno svojstvo vertikalnog poravnanja u CSS-u za vertikalno poravnanje. Međutim, u praksi to uopće ne funkcionira kako se očekivalo. Pokušajmo ovo shvatiti.
Uporedimo sljedeće pristupe. Poravnajte pomoću:
- stolovi,
- udubljenje,
- visina linije
- istezanje,
- negativna marža,
- transformirati
- pseudo element
- flexbox.
Postoje dva div element, pri čemu je jedan od njih 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, razmotrimo slučaj kada su dimenzije vanjskih i unutarnjih blokova poznato. Dodajmo pravilo display: inline-block unutrašnjem elementu, a text-align: center i vertical-align: middle vanjskom elementu.
Imajte na umu da se poravnanje primjenjuje samo na elemente koji imaju inline ili inline-blok način prikaza.
Postavimo veličine blokova, kao i boje pozadine tako da možemo vidjeti njihove granice.
Vanjski (širina: 200px; visina: 200px; poravnanje teksta: centar; vertikalno poravnanje: sredina; boja pozadine: #ffc; ) .unutrašnji (prikaz: inline-blok; širina: 100px; visina: 100px; boja pozadine : #fcc;)
Nakon primjene stilova to ćemo vidjeti unutrašnja jedinica vodoravno, ali ne i okomito:
http://jsfiddle.net/c1bgfffq/
Zašto se to dogodilo? Stvar je u tome da svojstvo vertical-align utiče na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga je primjena ove imovine na vanjski element nije dao 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 poravnati okomito 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.
Poravnanje pomoću tabele
Prvo rješenje koje vam 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 unutrašnji blok.
http://jsfiddle.net/c1bgfffq/1/
Očigledan nedostatak ovog rješenja je to što je, sa semantičke tačke gledišta, netačno koristiti tabele za poravnanje. Drugi nedostatak je što kreiranje tabele zahteva dodavanje još jednog elementa oko spoljašnjeg 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; )
Međutim, vanjski blok će i dalje ostati stol sa svim posljedicama koje iz toga proizlaze.
Poravnanje pomoću uvlaka
Ako su poznate visine unutrašnjeg i vanjskog bloka, onda se poravnanje može postaviti pomoću vertikalnih 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čenom broju slučajeva kada su poznate visine oba bloka.
Poravnanje pomoću visine 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; ) .unutarnji (razmak: nowrap; overflow: skriven; )
http://jsfiddle.net/c1bgfffq/12/
Ova tehnika se također može koristiti za poravnavanje višerednog teksta ako redefinirate vrijednost visine reda za unutrašnji blok, a također dodate pravila display: inline-block i vertical-align: srednja.
Vanjski (visina: 200px; visina-line: 200px; ) .unutarnji (visina-line: normalan; prikaz: inline-block; vertikalno-poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/
Oduzeti ovu metodu je da visina vanjskog bloka mora biti poznata.
Poravnavanje pomoću "stretch"
Ova metoda se može koristiti kada je visina vanjskog bloka nepoznata, ali je visina unutrašnjeg bloka poznata.Da biste to uradili potrebno vam je:
- postaviti relativno pozicioniranje na eksterni blok, a apsolutno pozicioniranje na unutrašnji blok;
- dodajte pravila gornji: 0 i donji: 0 unutrašnjem bloku, zbog čega će se protegnuti na cijelu visinu vanjskog bloka;
- postavite vertikalni padding unutrašnjeg 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 pretraživač da izračuna vertikalni padding u jednakom omjeru ako je postavljen na auto .
Poravnanje sa negativnim marginama na vrhu
Ova metoda je postala nadaleko poznata i vrlo se često koristi. Kao i prethodni, koristi se kada je visina vanjskog bloka nepoznata, ali je poznata visina unutrašnjeg.Morate postaviti vanjski blok na relativno pozicioniranje, a unutrašnji blok na apsolutno pozicioniranje. Zatim trebate pomjeriti unutrašnji blok dolje za polovinu visine gornjeg dijela vanjskog bloka: 50% i podići ga za polovinu njegove vlastite visine margin-top: -H unutrašnji / 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.
Poravnanje sa transformacijom
Ova metoda je slična prethodnoj, ali se može koristiti 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% .Vanjska ( pozicija: relativna; ) .unutrašnja ( pozicija: apsolutna; vrh: 50%; transformacija: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Zašto je bilo nemoguće postaviti vrijednost kao postotak u prethodnoj metodi? Budući da se procentualne vrijednosti margine izračunavaju u odnosu na roditeljski element, vrijednost od 50% bila bi polovina visine vanjskog okvira, a mi bismo morali podići unutrašnji okvir na polovinu njegove vlastite visine. Svojstvo transformacije je savršeno za ovo.
Nedostatak ove metode je što se ne može koristiti ako unutrašnja jedinica ima apsolutno pozicioniranje.
Usklađivanje sa Flexboxom
Većina moderan način 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, raspoređujući ih gotovo svuda. Centralno poravnanje za Flexbox je vrlo jednostavan zadatak.Vanjski blok treba postaviti da prikazuje: flex, a unutrašnji blok na marginu: 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.
Koju metodu da odaberem?
Morate početi od izjave o problemu:- Za vertikalno poravnanje teksta, bolje je koristiti vertikalne uvlake ili svojstvo visine linije.
- Za apsolutno pozicionirane elemente sa poznatom visinom (na primjer, ikone), metoda s negativnim svojstvom margin-top je idealna.
- Za više složeni slučajevi Kada je visina bloka nepoznata, potrebno je da koristite pseudo element ili svojstvo transformacije.
- Pa, ako ste te sreće da ne morate podržavati starije verzije IE pretraživača, onda je, naravno, bolje koristiti Flexbox.
Mislim da su se mnogi od vas koji su imali posla sa rasporedom naišli na potrebu da se elementi poravnaju okomito i znaju poteškoće koje nastaju kada se element poravna sa središtem.
Da, postoji posebno viševrijedno svojstvo vertikalnog poravnanja u CSS-u za vertikalno poravnanje. Međutim, u praksi to uopće ne funkcionira kako se očekivalo. Pokušajmo ovo shvatiti.
Uporedimo sljedeće pristupe. Poravnajte pomoću:
- stolovi,
- udubljenje,
- visina linije
- istezanje,
- negativna marža,
- transformirati
- pseudo element
- flexbox.
Postoje dva elementa div, pri čemu je jedan od njih 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, razmotrimo slučaj kada su dimenzije vanjskih i unutarnjih blokova poznato. Dodajmo pravilo display: inline-block unutrašnjem elementu, a text-align: center i vertical-align: middle vanjskom elementu.
Imajte na umu da se poravnanje primjenjuje samo na elemente koji imaju inline ili inline-blok način prikaza.
Postavimo veličine blokova, kao i boje pozadine tako da možemo vidjeti njihove granice.
Vanjski (širina: 200px; visina: 200px; poravnanje teksta: centar; vertikalno poravnanje: sredina; boja pozadine: #ffc; ) .unutrašnji (prikaz: inline-blok; š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? Stvar je u tome da svojstvo vertical-align utiče na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga, primjena ovog svojstva na vanjski element nije proizvela 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 poravnati okomito 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.
Poravnanje pomoću tabele
Prvo rješenje koje vam 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 unutrašnji blok.
http://jsfiddle.net/c1bgfffq/1/
Očigledan nedostatak ovog rješenja je to što je, sa semantičke tačke gledišta, netačno koristiti tabele za poravnanje. Drugi nedostatak je što kreiranje tabele zahteva dodavanje još jednog elementa oko spoljašnjeg 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; )
Međutim, vanjski blok će i dalje ostati stol sa svim posljedicama koje iz toga proizlaze.
Poravnanje pomoću uvlaka
Ako su poznate visine unutrašnjeg i vanjskog bloka, onda se poravnanje može postaviti pomoću vertikalnih 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čenom broju slučajeva kada su poznate visine oba bloka.
Poravnanje pomoću visine 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; ) .unutarnji (razmak: nowrap; overflow: skriven; )
http://jsfiddle.net/c1bgfffq/12/
Ova tehnika se također može koristiti za poravnavanje višerednog teksta ako redefinirate vrijednost visine reda za unutrašnji blok, a također dodate pravila display: inline-block i vertical-align: srednja.
Vanjski (visina: 200px; visina-line: 200px; ) .unutarnji (visina-line: normalan; prikaz: inline-block; vertikalno-poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/
Nedostatak ove metode je što visina vanjskog bloka mora biti poznata.
Poravnavanje pomoću "stretch"
Ova metoda se može koristiti kada je visina vanjskog bloka nepoznata, ali je visina unutrašnjeg bloka poznata.Da biste to uradili potrebno vam je:
- postaviti relativno pozicioniranje na eksterni blok, a apsolutno pozicioniranje na unutrašnji blok;
- dodajte pravila gornji: 0 i donji: 0 unutrašnjem bloku, zbog čega će se protegnuti na cijelu visinu vanjskog bloka;
- postavite vertikalni padding unutrašnjeg 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 pretraživač da izračuna vertikalni padding u jednakom omjeru ako je postavljen na auto .
Poravnanje sa negativnim marginama na vrhu
Ova metoda je postala nadaleko poznata i vrlo se često koristi. Kao i prethodni, koristi se kada je visina vanjskog bloka nepoznata, ali je poznata visina unutrašnjeg.Morate postaviti vanjski blok na relativno pozicioniranje, a unutrašnji blok na apsolutno pozicioniranje. Zatim trebate pomjeriti unutrašnji blok dolje za polovinu visine gornjeg dijela vanjskog bloka: 50% i podići ga za polovinu njegove vlastite visine margin-top: -H unutrašnji / 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.
Poravnanje sa transformacijom
Ova metoda je slična prethodnoj, ali se može koristiti 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% .Vanjska ( pozicija: relativna; ) .unutrašnja ( pozicija: apsolutna; vrh: 50%; transformacija: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Zašto je bilo nemoguće postaviti vrijednost kao postotak u prethodnoj metodi? Budući da se procentualne vrijednosti margine izračunavaju u odnosu na roditeljski element, vrijednost od 50% bila bi polovina visine vanjskog okvira, a mi bismo morali podići unutrašnji okvir na polovinu njegove vlastite visine. Svojstvo transformacije je savršeno za ovo.
Nedostatak ove metode je što se ne može koristiti ako unutrašnja jedinica ima apsolutno pozicioniranje.
Usklađivanje sa Flexboxom
Najmoderniji način vertikalnog poravnanja je korištenje fleksibilnog rasporeda kutije (popularno poznatog kao Flexbox). Ovaj modul vam omogućava da fleksibilno kontrolišete pozicioniranje elemenata na stranici, raspoređujući ih gotovo svuda. Centralno poravnanje za Flexbox je vrlo jednostavan zadatak.Vanjski blok treba postaviti da prikazuje: flex, a unutrašnji blok na marginu: 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.
Koju metodu da odaberem?
Morate početi od izjave o problemu:- Za vertikalno poravnanje teksta, bolje je koristiti vertikalne uvlake ili svojstvo visine linije.
- Za apsolutno pozicionirane elemente sa poznatom visinom (na primjer, ikone), metoda s negativnim svojstvom margin-top je idealna.
- 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 pretraživača, onda je, naravno, bolje koristiti Flexbox.
Oznake: Dodajte oznake
Može se izvršiti horizontalno i okomito poravnavanje elemenata Različiti putevi. Izbor metode ovisi o vrsti elementa (blok ili inline), vrsti njegovog pozicioniranja, veličini itd.
1. Horizontalno poravnanje prema sredini bloka/stranice
1.1. Ako je navedena širina bloka:
div ( širina: 300px; margina: 0 auto; /*centriraj element horizontalno unutar roditeljskog bloka*/)Ako želite da poravnate umetnuti element na ovaj način, potrebno ga je postaviti na display: block;
1.2. Ako je blok ugniježđen unutar drugog bloka i njegova širina nije navedena/specificirana:
1.3. Ako blok ima širinu i mora biti centriran na roditeljski blok:
1.4. Ako blokovi nemaju specificiranu širinu, možete ih centrirati koristeći roditeljski blok omotača:
2. Vertikalno poravnanje
2.1. Ako tekst zauzima jedan red, na primjer, za dugmad i stavke menija:
.button (visina: 50px; visina linije: 50px;)2.2. Da vertikalno poravnate blok unutar roditeljskog bloka:
2.3. Vertikalno poravnanje prema vrsti stola:
2.4. Ako blok ima datu širinu i visinu i mora biti centriran na roditeljski blok:
2.5. Apsolutno pozicioniranje u centru stranice/bloka pomoću CSS3 transformacije:
ako su dimenzije navedene za element
div ( širina: 300px; /*postavi širinu bloka*/ visina:100px; /*postavi visinu bloka*/ transform: translate(-50%, -50%); pozicija: apsolutna; vrh: 50 %; lijevo: 50% ; )
ako element nema dimenzije i nije prazan
Neki tekst ovdje
Postoji nekoliko fundamentalno različitih načina za centriranje objekta okomito koristeći CSS, ali odabir pravog može biti težak. Pogledaćemo neke od njih, a takođe i napraviti malu web stranicu koristeći stečeno znanje.
Vertikalno poravnanje centra nije lako postići korištenjem CSS-a. Postoji mnogo načina i ne rade svi u svim pretraživačima. Pogledajmo 5 razne metode, kao i prednosti i nedostatke svakog od njih. Primjer.
1. metoda
Ova metoda pretpostavlja da postavljamo neki element
pros
- Sadržaj može dinamički mijenjati visinu (visina nije definirana u CSS-u).
- Sadržaj se ne prekida 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, s vrhom postavljenim na 50% i marginom-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 postaviti overflow:auto; za div koji sadrži sadržaj, pa će se, ako sadržaj ne uklapa, pojaviti 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 i korisnik je smanjio prozore, u kom slučaju se trake za pomicanje neće pojaviti.
3rd method
U ovoj metodi, omotat ćemo sadržaj div drugim divom. Postavimo njegovu visinu na 50% (visina: 50%;), a donju marginu na polovinu visine (margin-bottom:-contentheight;). Sadržaj će se očistiti i biti centriran.
pros
- Radi u svim pretraživačima.
- Kada nema dovoljno prostora (na primjer, kada se prozor smanji), sadržaj nije izrezan, pojavit će se trake za pomicanje.
Minusi
- Mogu se sjetiti samo jedne stvari: da se koristi dodatni prazan element.
4. metod.
Ova metoda koristi svojstvo position:apsolute;. za div sa fiksnim dimenzijama (širina i visina). Zatim postavljamo njegove koordinate top:0; bottom:0; , ali budući da ima fiksnu visinu, ne može se rastegnuti i poravnat je sa središtem. 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 odsječen bez traka za pomicanje ako nema dovoljno prostora u kontejneru.
5. metod
Koristeći ovu metodu, možete centrirati jedan red teksta. Jednostavno 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 odsijeca tekst ako se ne uklapa.
Minusi
- Radi samo sa tekstom (ne radi sa blok elementima).
- Ako postoji više od jednog reda teksta, izgleda vrlo loše.
Ova metoda je vrlo korisna za male elemente, kao što je centriranje teksta u dugme ili polje za tekst.
Sada znate kako postići vertikalno centralno poravnanje, napravimo jednostavnu web stranicu koja će na kraju izgledati 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 centar sadržaja)
- #centred (centralni element)
- #side
- #logo
- #nav (list
- #content
- #bottom (za autorska prava i sve to)
Napišimo sljedeće html oznake:
Centrirana kompanija KompanijaNaslov 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 preovlađujte premium inovacije nakon uvjerljivih scenarija. Besprekorno iskoristite visoke standarde u ljudskom kapitalu sa vrhunskim proizvedenim proizvodima. Izrazito udružiti sheme usklađene sa standardima prije robusnih vortala. Jedinstveno rekaptiualizirajte iskorištenu web-spremnost u odnosu na gotove informacije.
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 čitavo 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 postavljanje elemenata na stranicu. Trebali biste sačuvati ovaj kod u datoteci style.css. Na to je veza zapisana 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 ( pozicija: relativna; float: lijevo; visina: 50%; margin-bottom: -200px; širina: 1px; ) #centered (pozicija: relativna; čista: lijevo; visina: 400px; širina: 80%; maks. -širina: 800px; minimalna širina: 400px; margina: 0 auto; pozadina: #fff; granica: 4px čvrsta #666; ) #dno (pozicija: apsolutna; donja: 0; desno: 0; ) #nav ( pozicija: apsolutno; lijevo: 0; gore: 0; dolje: 0; desno: 70%; padding: 20px; margina: 10px; ) #content ( pozicija: apsolutna; lijevo: 30%; desno: 0; gore: 0; dolje: 0; overflow: auto; visina: 340px; padding: 20px; margina: 10px; )
Prije nego što naš centar sadržaja poravnamo, moramo postaviti visinu tijela i html-a na 100%. Budući da se visina izračunava bez unutrašnjeg i vanjskog dopuna (odmak i margina), postavili smo ih (odmak) na 0 tako da nema traka za pomicanje.
Donja margina za "floater" element je jednaka minus polovini visine sadržaja (400px), odnosno -200px;
Vaša stranica bi sada trebala izgledati otprilike ovako:
#centrirana širina elementa 80%. Ovo čini našu stranicu užim na malim ekranima i širim na većim. većina sajtova izgleda nepristojno 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. Morate ga postaviti na fiksnu širinu.
Pošto #centered element ima položaj:relativni skup, možemo koristiti apsolutno pozicioniranje elemenata unutar njega. Zatim postavite overflow:auto; za element #content tako da se trake za pomicanje pojavljuju ako sadržaj ne odgovara.
Korak 3
Posljednje što ćemo učiniti je dodati malo stila 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 ( display: block; 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:hover, #nav li a:focus (pozadina: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; boja: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )
Prva stvar koju smo uradili da bi meni izgledao bolje je da smo uklonili oznake za nabrajanje tako što smo postavili atribut list-style:none, a takođe smo postavili padding i padding, pošto se oni po defaultu uvelike razlikuju u različitim pretraživačima.
Obratite pažnju da smo tada naveli da veze treba da budu prikazane kao blok elementi. Sada, kada su prikazani, rastegnuti su po cijeloj širini elementa u kojem se nalaze.
Još jedna zanimljiva stvar koju smo koristili za meni su pseudo-klase:prije i:poslije. Omogućavaju vam da dodate neš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.
Korak 4
I na kraju, ali ne i najmanje važno, našem dizajnu ćemo dodati nekoliko vijaka 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; veličina fonta: 0,7em; boja: #f03; ) #logo (font-size: 2em; text-align: center; boja: #999; ) #logo jak (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, to će biti urađeno svojstvom border-radius. Ovo još nije implementirano u nekim pretraživačima, osim pomoću prefiksa -moz i -webkit za Mozilla Firefox i Safari/Webkit.
Kompatibilnost
Kao što ste verovatno već pretpostavili, glavni izvor problema kompatibilnosti je Internet Explorer:
- Element #floater mora imati postavljenu širinu
- IE 6 ima dodatni padding oko menija
Vlad Merzhevich
Zbog činjenice da se sadržaj ćelija tabele može istovremeno poravnati horizontalno i vertikalno, proširene su mogućnosti za kontrolu položaja elemenata u odnosu jedan prema drugom. Tabele vam omogućavaju da postavite poravnanje slika, teksta, polja obrasca i drugih elemenata u odnosu jedan na drugi i na web stranicu u cjelini. Općenito, usklađivanje je uglavnom neophodno za uspostavljanje vizuelne komunikacije između različitih elemenata, kao i njihove grupe.
Vertikalno centriranje
Jedan od načina da posjetitelju pokažete fokus i naziv stranice je korištenje uvodne stranice. Ovo je prva stranica na kojoj se po pravilu nalazi flash splash screen ili slika koja izražava glavna ideja site. Slika je ujedno i link ka drugim dijelovima stranice. Ovu sliku morate postaviti u centar prozora pretraživača, bez obzira na rezoluciju monitora. U tu svrhu možete koristiti tablicu širine i visine od 100% (primjer 1).
Primjer 1: Centriranje crteža
Poravnanje 
IN u ovom primjeru horizontalno poravnanje se postavlja pomoću parametra oznake align="center".
, a sadržaj ćelije možda neće biti centriran okomito, jer je to zadana pozicija. Da biste postavili visinu stola na 100%, morate ukloniti, kod prestaje da važi.
Korištenje širine i visine za pokrivanje cijelog dostupnog područja web stranice osigurava da će sadržaj tabele biti poravnat tačno u sredini prozora pretraživača, bez obzira na njegovu veličinu.
Horizontalno poravnanje
Kombinacijom align (horizontalno poravnanje) i valign (vertikalno poravnanje) atributa oznake
, dozvoljeno je postaviti nekoliko tipova položaja elemenata jedan u odnosu na drugi. Na sl. Slika 1 pokazuje načine horizontalnog poravnanja elemenata. Pogledajmo neke primjere poravnanja teksta prema donjoj slici.
Top Alignment
Za određivanje gornjeg poravnanja sadržaja ćelije za oznaku
morate postaviti atribut valign sa vrijednošću top (primjer 2). Primjer 2: Korištenje valign
Poravnanje Kolona 1 Kolona 2 U ovom primjeru, karakteristike ćelije se kontroliraju pomoću parametara oznake
, ali je također zgodnije mijenjati kroz stilove. Konkretno, poravnanje u ćelijama je specificirano svojstvima vertical-align i text-align (primjer 3). Primjer 3: Primjena stilova za poravnanje
Poravnanje Kolona 1 Kolona 2 Za skraćivanje koda, ovaj primjer koristi grupiranje selektora jer se svojstva vertikalnog poravnanja i dopune primjenjuju na dvije ćelije istovremeno.
Poravnanje dna se vrši na isti način, ali se umjesto gornje vrijednosti koristi donja.
Centralno poravnanje
Prema zadanim postavkama, sadržaj ćelije je poravnat sa središtem njihove vertikalne linije, tako da ako stupci imaju različite visine, morate postaviti poravnanje na gornju ivicu. Ponekad i dalje morate napustiti originalnu metodu poravnanja, na primjer, kada postavljate formule, kao što je prikazano na sl. 2.
U ovom slučaju, formula se nalazi strogo u sredini prozora pretraživača, a njen broj se nalazi na desnoj ivici. Da biste rasporedili elemente na ovaj način, trebat će vam tabela s tri ćelije. Spoljne ćelije treba da imaju iste dimenzije, u srednjoj ćeliji je poravnanje centrirano, au desnoj ćeliji - uz desnu ivicu (primer 4). Ovaj broj ćelija je potreban da bi se osiguralo da je formula pozicionirana u sredini.
Primjer 4: Poravnanje formule
Poravnanje 
(18.6) U ovom primjeru, prva ćelija tabele je ostavljena prazna, ona služi samo za kreiranje uvlake, koja se, inače, može postaviti i pomoću stilova.
Poravnavanje elemenata obrasca
Koristeći tabele, zgodno je odrediti položaj polja obrasca, posebno kada su isprepletena tekstom. Jedna od opcija dizajna obrasca, koji je namijenjen za unos komentara, prikazana je na Sl. 3.
Da biste osigurali da je tekst pored polja obrasca desno poravnat, a sami elementi obrasca lijevo, trebat će vam tabela s nevidljivim rubom i dvije kolone. Lijeva kolona će sadržavati sam tekst, a desna će sadržavati tekstualna polja (primjer 5).
Primjer 5: Poravnavanje polja obrasca
Poravnanje U ovom primjeru, za one ćelije gdje je potrebno desno poravnanje, dodaje se atribut align="right". Kako bi se osiguralo da je oznaka komentara pozicionirana na vrhu višerednog teksta, odgovarajuća ćelija je postavljena na poravnato odozgo pomoću atributa valign.
- #side