Danas ćemo se, dragi čitatelju, pozabaviti problemom vertikalnog poravnanja u bloku. div.
Najvjerovatnije već znate za prekrasno CSS svojstvo vertikalno poravnanje. I sam Bog nam je rekao da koristimo ovo svojstvo za vertikalno poravnanje (nije uzalud što ima tako samoobjašnjavajući naziv).
Formulacija problema: Potrebno je centrirati sadržaj bloka varijabilne visine u odnosu na vertikalu.
Idemo sada na rješavanje problema.
I tako, imamo blok, njegova visina se može promijeniti:
Prvo što vam padne na pamet je da uradite sledeći trik:
Postoje svi razlozi da vjerujemo da je ta fraza Blokiraj sadržajće se poravnati sa središtem visine div kontejnera.
Ali nije ga bilo! Na ovaj način nećemo postići nikakvo očekivano centralno poravnanje. I zašto? Čini se da je sve tačno naznačeno. Ispostavilo se da je ovo kvaka: vlasništvo vertikalno poravnanje može se koristiti samo za poravnavanje sadržaja ćelija tabele ili za poravnavanje umetnutih elemenata jedan u odnosu na drugi.
Što se tiče poravnanja unutar ćelije tabele, mislim da je sve jasno. Objasniću još jedan slučaj sa inline elementima.
Vertikalno poravnanje inline elemenata
Pretpostavimo da imate niz teksta koji je razbijen umetnutim oznakama na dijelove:
Vi Welcomes komad tekst!
Inline tag se shvata kao kontejner, čiji izgled ne dovodi do premotavanja sadržaja u novi red.
Radnja blok oznake dovodi do premotavanja sadržaja kontejnera u novi red.
Je blok oznaka. Ako priložimo komade teksta u blokove, tada će se svaki od njih pojaviti na novom redu. Korištenje oznake koji, za razliku od, je mala slova, neće biti prelamanja kontejnera u novi red, svi kontejneri ostati na jednoj liniji.Kontejner Pogodno je koristiti kada se specificira dio teksta sa posebnim formatiranjem (istaknuti bojom, drugačiji font, itd.)
Za kontejnere primijeniti sljedeća CSS svojstva:
#perviy (vertical-align: sub;) #vtoroy (vertical-align: 3px;) #tretiy (vertical-align: -3px;)
Kao rezultat, redak teksta će izgledati ovako:
Ovo nije ništa drugo do vertikalno poravnanje inline elemenata i CSS svojstva vertikalno poravnanje savršeno se nosi sa ovim zadatkom.
Malo smo odstupili, sada se vraćamo našem glavnom zadatku.
Vertikalno poravnanje u div kontejneru
Bez obzira na to, koristit ćemo svojstvo za poravnanje unutar div kontejnera. vertikalno poravnanje... Kao što sam već rekao, ovo svojstvo se može koristiti u slučaju poravnanja inline elemenata (o ovom slučaju smo detaljno raspravljali gore i ne odgovara nam za poravnanje u div kontejneru); ostaje samo iskoristiti činjenicu da vertikalno poravnanje radi za ćelije tabele.
Kako ovo možemo iskoristiti? Nemamo tabelu, radimo sa div kontejnerom.
Ha, ispostavilo se da je vrlo jednostavno.
CSS svojstvo displej omogućava nam da pretvorimo naš div blok u ćeliju tabele, to se može učiniti jednostavno i prirodno:
Hajde da imamo div klase poravnavanje teksta:
Blokiraj sadržajZa ovaj blok navedite sljedeće CSS svojstvo:
Textalign (prikaz: ćelija-tabela;)
Ova CSS instrukcija će čudesno pretvoriti naš div u ćeliju tabele, a da je na bilo koji način vizuelno ne menja. I za ćeliju tabele, možemo primijeniti svojstvo vertikalno poravnanježeljeno vertikalno poravnanje će u potpunosti funkcionirati.
Međutim, ne može se sve završiti tako jednostavno. Imamo divan IE pretraživač. Ne zna raditi sa imovinom displej: ćelija tabele(Predlažem da se upoznate sa tabelom koja ilustruje performanse ovog CSS svojstva u različitim pretraživačima na web stranici htmlbook.ru). Stoga ćemo morati ići na razne trikove.
Postoji mnogo načina za postizanje poravnanja u div kontejneru za sve pretraživače:
- Metoda pomoću dodatnog pomoćnog div cotneyera
- Metoda pomoću izraza. Povezan je sa pametnim proračunom visine blokova. Poznavanje JavaScript-a je ovdje neophodno.
- Korištenje svojstva line-height. Ova metoda je prikladna samo za vertikalno poravnanje u bloku poznate visine, što znači da općenito nije primjenjiva.
- Korišćenje apsolutnog i relativnog odstupanja sadržaja u slučaju IE pretraživača. Ova metoda mi se čini najjasnija i najjednostavnija. Također, može se implementirati za div kontejner promjenjive visine. Zadržat ćemo se na tome detaljnije.
Kao što razumete, ostaje nam da rešimo problem vertikalnog poravnanja u IE, povezan sa njegovim nerazumevanjem svojstva displej: ćelija tabele(ni IE6, ni IE7, ni IE8 nisu upoznati sa ovom nekretninom). Stoga, korištenjem uslovni komentar posebno za pretraživače iz IE porodice, specificiraćemo druga CSS svojstva.
Uslovni komentar
Dizajn tipa:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
naziva se uslovni komentar (pazite, oblik uslovnog komentara mora u potpunosti odgovarati datom primjeru, do razmaka).
Instrukcije sadržane u takvom uslovnom komentaru će se izvršiti samo ako pretraživač koji tumači ovaj kod pripada IE porodici.
Stoga, koristeći uslovni komentar, možemo sakriti dio koda iz svih pretraživača osim IE.
Rješenje problema
Zbog svega ovog peršuna, morat ćemo nahraniti naš HTML sa dva dodatna spremnika. Ovako će izgledati naš tekstualni blok:
Ovo je neka vrsta verifikacionog teksta.
Sastoji se od dvije linije.Za klasu kontejner div textalign postavlja CSS svojstva koja vertikalno poravnavaju njegov sadržaj za sve normalne pretraživače (osim IE, naravno):
Prikaz: ćelija-tabela; vertikalno poravnanje: sredina;
I još dva svojstva koja postavljaju širinu i visinu bloka:
Širina: 500px; visina: 500px;
Ovo je sasvim dovoljno da se sadržaj kontejnera u sredini poravna u odnosu na vertikalu, u svim pretraživačima. osim IE.
Sada počinjemo da dodajemo svojstva koja se odnose na poravnanje. za pretraživače iz IE porodice(za njih smo koristili dodatne blokove div i raspon):
Pozivajući se na oznaku div unutar bloka klase textalign... Da biste to učinili, prvo morate navesti ime klase, a zatim, odvojeno razmakom, oznaku na koju se pozivamo.
Textalign div (pozicija: apsolutna; vrh: 50%;)
Takva konstrukcija znači: za sve div oznake unutar bloka sa klasom textalign primijeniti navedena svojstva.
Prema tome, stilovi specificirani za blok textalign su modificirani:
Poravnanje teksta (prikaz: ćelija tabele; vertikalno poravnanje: sredina; širina: 500px; visina: 500px; pozicija: relativna;)
Gornja lijeva tačka okvira za tekst sada je pomaknuta prema dolje za 50%.
Da razjasnim šta se dešava, nacrtao sam ilustraciju:
Kao što možete vidjeti sa slike, napravili smo određeni napredak. Ali to nije sve! Gornja lijeva tačka žute kutije se zaista pomjerila 50% prema dolje u odnosu na roditeljski (ljubičasti) okvir. Ali treba nam nešto na pedeset posto visine ljubičastog bloka centar žutog bloka, a ne njegova gornja lijeva tačka.
Sada će se oznaka koristiti raspon i njegovo relativno pozicioniranje:
Raspon teksta (pozicija: relativna; vrh: -50%;)
Dakle, žuti blok smo pomaknuli prema gore za 50% njegove visine, u odnosu na početnu poziciju. Kao što možete zamisliti, visina žute kutije jednaka je visini centriranog sadržaja. I posljednja operacija s span kontejnerom pozicionirala je naš sadržaj u sredinu ljubičastog bloka. Ura!
Mali šaman
Prije svega, moramo sakriti peršin od svih normalnih pretraživača i otvoriti ga za IE. To se, naravno, može učiniti uz pomoć uvjetnog komentara, nije se uzalud upoznalo s tim:
Postoji mali problem. Ako je centrirani sadržaj previsok, to dovodi do neugodnih posljedica: pojavljuje se dodatna visina vertikalnog pomicanja.
Rješenje: potrebno je dodati svojstvo prelivanje: skriveno blok textalign.
Upoznajte nekretninu do detalja overflow može biti unutra.
Konačan izgled CSS blok instrukcija textalign izgleda kao:
Textalign (prikaz: ćelija-tabela; vertikalno-poravnanje: sredina; širina: 500px; visina: 500px; pozicija: relativna; prelivanje: skriveno; ivica: 1px puna crna;)
Izvinite, zaboravio sam da pomenem jednu važnu tačku. Ako pokušaš postavite visinu bloka klase textalign kao procenat onda imaš ništa neće biti od toga.
Centriranje u bloku promjenjive visine
Vrlo često je potrebno podesiti visinu bloka klase. textalign ne u pikselima, već kao postotak visine roditeljskog bloka i poravnajte sadržaj div kontejnera u sredini.
Kvaka je u tome što je to nemoguće učiniti za ćeliju tabele (i na kraju krajeva, blok klase textalign pretvara u ćeliju tabele, zahvaljujući svojstvu displej: ćelija tabele).
U ovom slučaju, trebate koristiti vanjski blok za koji je specificirano CSS svojstvo displej: stol i već da postavi procentualnu vrijednost visine. Zatim je blok ugniježđen unutar njega, sa CSS direktivom displej: ćelija tabele, će sretno naslijediti visinu roditeljskog bloka.
Da bismo implementirali blok promjenjive visine u našem primjeru, malo ćemo podesiti CSS:
Klasa textalign promijenit ćemo vrijednost imovine displej sa tabela-ćelija on sto i uklonite direktivu o poravnanju vertikalno poravnanje: sredina... Sada možemo sigurno promijeniti vrijednost visine sa 500 piksela na, na primjer, 100%.
Dakle, CSS svojstva za blok klase textalign izgledat će ovako:
Textalign (prikaz: tablica; širina: 500px; visina: 100%; pozicija: relativna; prelijevanje: skriveno; ivica: 1px puna crna;)
Ostaje da se izvrši centriranje sadržaja. Da biste to učinili, kontejner div ugniježđen u blok klase textalign(ovo je isti žuti blok na slici), potrebno je postaviti CSS svojstvo displej: ćelija tabele tada će naslijediti 100% visinu od roditeljskog bloka textalign(ljubičasti blok). I ništa nas ne sprječava da uskladimo sadržaj ugniježđenog div kontejnera u centru sa svojstvom vertikalno poravnanje: sredina.
Dobijamo još jednu dodatnu listu CSS svojstava za div ugniježđen u kontejner textalign.
Textalign div (prikaz: ćelija tabele; vertikalno poravnanje: sredina;)
To je cijeli trik. Opciono, možete mijenjati visinu sa centriranim sadržajem.
Za više informacija o vertikalnom poravnanju bloka promjenjive visine, pogledajte.
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 lijevo od 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 kojoj 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-grupaKao š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.
Vrlo često je u rasporedu potrebno centrirati neki element horizontalno i/ili okomito. Stoga sam odlučio napraviti članak s raznim metodama centriranja, tako da sve bude pri ruci na jednom mjestu.
Horizontalno poravnanje
margina: auto
Horizontalno poravnanje sa marginom se koristi kada je poznata širina centralnog elementa. Radi za blok elemente:
Elem (margina-lijevo: auto; margin-desno: auto; širina: 50%;)
Određivanje automatske vrijednosti za desni i lijevi padding čini ih jednakim, što centrira element horizontalno unutar roditeljskog bloka.
text-align: centar
Ova metoda je prikladna za centriranje teksta unutar bloka. text-align: centar:
Poravnavanje sa text-align Ja sam centriran
pozicija i negativna margina lijevo
Pogodno za centrirane blokove poznate širine. Roditeljskom bloku dajemo poziciju: u odnosu na poziciju u odnosu na njega, centralni element je pozicija: apsolutna, lijevo: 50%, i negativna margina-lijevo, koja je jednaka polovini širine elementa:
Usklađivanje sa položajem Ja sam centriran
prikaz: inline-block + text-align: centar
Ova metoda je prikladna za poravnavanje blokova nepoznate širine, ali zahtijeva roditeljski omotač. Na primjer, na ovaj način možete centrirati horizontalni meni:
Poravnanje sa prikazom: inline-block + text-align: centar; Vertikalno poravnanje
visina linije
Da biste poravnali jedan red teksta, možete koristiti istu visinu i razmak između redova za roditeljski blok. Pogodno za dugmad, stavke menija i još mnogo toga.
visina linije Ja sam vertikalno poravnat
pozicija i negativna marža gore
Element se može vertikalno poravnati dajući mu fiksnu visinu i položaj primjene: apsolutnu i negativnu marginu prema gore jednaku polovini visine elementa koji se poravnava. Roditeljskom bloku mora biti dodijeljena pozicija: relativno:
Omot (pozicija: relativna;) elem (visina: 200px; margina: -100px 0 0; pozicija: apsolutna; vrh: 50%;)
Tako, koristeći pozicioniranje i negativne margine, možete centrirati element na stranici.
displej: ćelija tabele
Za vertikalno poravnanje, svojstvo display: table-cell se primenjuje na element, što ga čini da emulira ćeliju tabele. Također postavljamo visinu i vertikalno poravnanje: sredinu na nju. Sve ćemo ovo umotati u kontejner sa svojstvom dislpay: table; :
Vertikalni prikaz poravnanja: tabela-ćelija Ja sam vertikalno poravnat
Dinamičko poravnavanje elementa na stranici
Pokrili smo načine za poravnavanje elemenata na stranici pomoću CSS-a. Sada pogledajmo implementaciju jQuery varijante.
Uključimo jQuery na stranicu:
Predlažem da napišete jednostavnu funkciju za centriranje elementa na stranici, nazovimo je alignCenter (). Sam element djeluje kao argument funkciji:
Funkcija alignCenter (elem) (// kod ovdje)
U tijelu funkcije, dinamički izračunajmo i objesimo koordinate centra stranice na CSS lijevo i gornje osobine:
Funkcija alignCenter (elem) (elem.css ((lijevo: ($ (prozor) .width () - elem.width ()) / 2 + "px", gore: ($ (prozor) .height () - elem. visina ()) / 2 + "px" // ne zaboravite dodati poziciju: apsolutno elementu da pokrene koordinate)))
U prvom redu funkcije dobivamo širinu dokumenta i oduzimamo od nje širinu elementa, podijeljenu na pola - ovo će biti centar stranice vodoravno. Drugi red radi istu stvar, samo sa visinom, za vertikalno poravnanje.
Funkcija je spremna, ostaje da je objesite na događaje spremanja DOM-a i promjene veličine prozora:
$ (funkcija () (// pozovi funkciju centriranja kada je DOM spreman alignCenter ($ (elem)); // pozovi funkciju kada se promijeni veličina prozora $ (window) .resize (function () (alignCenter ($ ( elem));)) // funkcija za centriranje elementa funkcija alignCenter (elem) (elem.css ((// izračunavanje lijeve i gornje koordinate lijevo: ($ (prozor) .width () - elem.width ()) / 2 + "px", gore: ($ (prozor) .height () - elem.height ()) / 2 + "px")))))
Koristeći Flexbox
Nove karakteristike CSS3, kao što je Flexbox, polako postaju uobičajene. Tehnologija pomaže u kreiranju rasporeda bez upotrebe plutajućih, pozicioniranja itd. Može se koristiti i za centriranje elemenata. Na primjer, koristimo flexbox na roditeljskom .wrapperu i centriramo sadržaj unutar:
Omot (prikaz: -webkit-box; prikaz: -moz-box; prikaz: -ms-flexbox; prikaz: -webkit-flex; display: flex; visina: 500px; širina: 500px;) .wrapper .content (margina: auto; / * margina: 0 auto; samo horizontalno * / / * margina: auto 0; samo vertikalno * /)
Lorem ipsum dolor sit ametOvo pravilo istovremeno centrira element horizontalno i okomito - margina sada radi ne samo za horizontalno, već i za vertikalno poravnanje. I bez poznate širine/visine.
Povezani resursi
Pomozite projektu
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 okvir može biti apsolutno pozicioniran unutar njega * /) .box (širina: 400px; pozicija: apsolutna; lijevo: 50%; margin-left : -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
h1 (margina: 0; transformacija: translate (-50%, -50%); pozicija: apsolutna; vrh: 50%; lijevo: 50%;)Neki tekst ovdje
Postoji nekoliko fundamentalno različitih načina za centriranje objekta okomito koristeći CSS, ali može biti teško odabrati pravi. Pogledaćemo neke od njih, a takođe i napraviti mali sajt koristeći stečeno znanje.
Nije lako postići vertikalno poravnanje centra sa CSS-om. Postoji mnogo načina, a ne rade svi u svim pretraživačima. Pogledajmo 5 različitih metoda i prednosti i nedostatke svake od njih. Primjer.
1. način
Ova metoda pretpostavlja da postavljamo neki element
način prikaza je kao tabela, nakon toga možemo koristiti svojstvo vertical-align u njoj (koje različito radi u različitim elementima).
#wrapper (display: table;) #cell (display: table-cell; vertical-align: middle;)Neke korisne informacije koje bi trebale biti centrirane.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 div, koje postavlja njegov vrh na 50% i marginu-top minus polovina 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.
Sadržaj ovdje#content (pozicija: apsolutna; vrh: 50%; visina: 240px; margin-top: -120px; / * minus polovina visine * /)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.
#floater (float: lijevo; visina: 50%; margin-bottom: -120px;) #content (jasno: oba; visina: 240px; pozicija: relativna;)evo sadržajapros
- 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;).
Važna informacija.#sadržaj (pozicija: apsolutna; vrh: 0; dno: 0; lijevo: 0; desno: 0; margina: auto; visina: 240px; širina: 70%;)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.
Neki red teksta#content (visina: 100px; visina linije: 100px;)pros
- Radi u svim pretraživačima.
- Ne seče tekst ako ne odgovara.
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:
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 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. -š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;) #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 ništa, kao i da smo postavili padding i padding, pošto su oni veoma različiti po podrazumevanoj vrednosti 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
Top srodni članci
