Do sada smo elemente poravnavali samo lijevo. Tačnije, ti i ja to uopće nismo radili, a sam pretraživač po defaultu poravnava elemente lijevo. Naravno, bilo bi previše dosadno poravnati sve na lijevo. Stoga, postoje različiti načini za centriranje i poravnavanje udesno.
Poravnavanje elemenata je nešto što samo trebate znati kada ovo radite. Prva stvar koju treba da uradite je da otkucate jednostavnu stranicu.
Nekada se pojavila oznaka, sada vam ne savjetujem da je koristite, zbog dostupnosti modernijih metoda, ali ne mogu a da je ne spomenem. Vrlo je, vrlo jednostavan za korištenje. Sve što vam treba da bude centrirano, stavljate unutar ove oznake. Na primjer, ovdje poravnavamo naslov 1. nivoa sa centrom.
Možete dodati sliku, također poravnatu po sredini, također pređimo na sljedeći red pomoću oznake
:
Naslov 1. nivoa, poravnat po sredini
To je bila oznaka koja je već zastarjela, osim toga, suprotno vašim očekivanjima, oznake jednostavno ne postoje. Recimo da je lijevo poravnato po defaultu, centar je poravnat pomoću oznake, ali što je s desnim?
Da bi riješili ovaj problem, programeri su smislili univerzalni način za poravnavanje HTML elemenata. Metoda je korištenje takozvanih kontejnera, koji se kreiraju pomoću oznake. Odnosno, sve što treba staviti u određeni kontejner stavlja se unutar oznake. A ova oznaka već ima atribut “align” čija vrijednost određuje poziciju ovog kontejnera. Postoje tri vrijednosti: "lijevo", "centar", "desno". Standardno je "lijevo", međutim, mislim da vas to ne čudi.
Hajde sada da napišemo isti HTML kod, ali koristeći kontejnere, pored toga, ne poravnajmo u centar, već udesno.
Kao što vidite, sve funkcioniše. Savjetujem vam da promijenite i vrijednosti atributa "align" kako biste pogledali druge vrste poravnanja sadržaja kontejnera.
Drugi način za poravnavanje HTML elemenata je pomoću tabela, ali ova tema zaslužuje posebnu raspravu, pa ćemo o tome govoriti u narednom članku.
Za sada bi vaša stranica trebala izgledati ovako:
Naslov 1. nivoa, poravnat po sredini
Naslov 1. nivoa, poravnat desno
S poštovanjem, Mikhail Rusakov.
P.S. Ako želite saznati više o HTML-u, pogledajte moj besplatni kurs s primjerom izrade web stranice u HTML-u:
Vrlo često je u rasporedu potrebno centrirati neki element horizontalno i/ili okomito. Stoga sam odlučio napraviti članak sa različitim načinima centriranja, kako bi sve bilo pri ruci na jednom mjestu.
Horizontalna margina poravnanja: autoHorizontalno poravnanje pomoću margine se koristi kada je poznata širina centralnog elementa. Radi za blok elemente:
Elem ( margin-lijevo: auto; margin-desno: auto; širina: 50%; )
Određivanje auto za desnu i lijevu marginu čini ih jednakim, što centrira element horizontalno unutar roditeljskog bloka.
text-align: centarOva metoda je prikladna za centriranje teksta unutar bloka. text-align: centar:
Poravnanje sa text-align .wrapper (text-align: center; )
Ja sam po sredini
pozicija i negativna margina lijevoPogodno za centriranje blokova poznate širine. Dajemo poziciju roditeljskog bloka: u odnosu na poziciju u odnosu na njega, poziciju centralnog elementa: apsolutnu, lijevo: 50% i negativnu marginu-lijevo čija je vrijednost jednaka polovini širine elementa:
Poravnanje sa položajem .wrapper (pozicija: relativna; ) .wrapper p (lijevo: 50%; margina: 0 0 0 -100px; pozicija: apsolutna; širina: 200px; )
Ja sam po sredini
prikaz: inline-block + text-align: centarMetoda je pogodna za poravnavanje blokova nepoznate širine, ali zahtijeva roditelj omotač. Na primjer, horizontalni meni možete centrirati na ovaj način:
Poravnanje sa prikazom: inline-block + text-align: centar; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )
Vertikalno poravnanje linija-visinaDa biste poravnali jedan red teksta, možete koristiti iste vrijednosti visine i proreda za roditeljski blok. Pogodno za dugmad, stavke menija itd.
line-height .wrapper (visina: 100px; visina-line: 100px; )
Ja sam vertikalno poravnat
pozicija i negativna marža goreElement se može poravnati okomito dajući mu fiksnu visinu i položaj primjene: apsolutna i negativna margina jednaka polovini visine elementa koji se poravnava. Roditeljskom bloku se mora dati položaj: relativan:
Omot (pozicija: relativna; ) elem (visina: 200px; margina: -100px 0 0; pozicija: apsolutna; vrh: 50%; )
Na ovaj način, koristeći pozicioniranje i negativne margine, možete centrirati element na stranici.
displej: ćelija tabeleZa vertikalno poravnanje, svojstvo display: table-cell se primjenjuje na element, što ga prisiljava da emulira ćeliju tablice. Također smo postavili njegovu visinu i vertikalno poravnanje: sredinu. Hajde da sve ovo umotamo u kontejner sa svojstvom dislpay: table;. :
Vertikalni prikaz poravnanja: table-cell .wrapper (prikaz: tablica; širina: 100%; ) .cell (prikaz: tablica-ćelija; visina: 100px; vertikalno poravnanje: sredina; )
Ja sam vertikalno poravnat
Dinamičko poravnanje elementa na straniciPogledali smo načine za poravnavanje elemenata na stranici pomoću CSS-a. Pogledajmo sada jQuery implementaciju.
Povež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čunavamo i dodjeljujemo koordinate centra stranice CSS lijevom i gornjem svojstvu:
Funkcija alignCenter(elem) ( elem.css(( lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem. height()) / 2 + "px" // ne zaboravite dodati position: absolute elementu za aktiviranje koordinata )) )
U prvom redu funkcije dobivamo širinu dokumenta i oduzimamo od nje širinu elementa, podijeljenu na pola - to će biti horizontalni centar stranice. Drugi red radi istu stvar, samo sa visinom za vertikalno poravnanje.
Funkcija je spremna, ostaje samo da je priključite na događaje spremnosti DOM-a i promjene veličine prozora:
$(function() ( // pozovite funkciju centriranja kada je DOM spreman alignCenter($(elem)); // pozovite funkciju kada promijenite veličinu prozora $(window).resize(function() ( alignCenter($(elem) )); )) // funkcija funkcija centriranja elementa funkcija alignCenter(elem) ( elem.css(( // izračunavanje lijeve i gornje koordinate lijevo: ($(window).width() - elem.width()) / 2 + " px", vrh: ($(window).height() - elem.height()) / 2 + "px" )) ) ))
Primjena FlexboxaNove CSS3 funkcije, kao što je Flexbox, postepeno postaju uobičajene. Tehnologija pomaže u kreiranju oznake bez korištenja plutajućih, pozicioniranja itd. Može se koristiti i za centriranje elemenata. Na primjer, primijenite Flexbox na roditelj element.wrapper i centrirajte sadržaj unutar:
Omot (prikaz: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; visina: 500px; širina: 500px; ) .wrapper .content ( margina: auto; /* margina: 0 auto; samo horizontalna */ /* margina: auto 0; samo vertikalna */ ) Lorem ipsum dolor sit amet
Ovo pravilo istovremeno centrira element horizontalno i vertikalno - margina sada radi ne samo za horizontalno poravnanje, već i za vertikalno. I bez poznate širine/visine.
Povezani resursi Pomozite projektuWeb dizajneri koriste DIV-ove u svom radu svaki dan. Bez ikakvog potcenjivanja, ovo je najpopularnija oznaka. Otvorite izvor bilo koje web stranice i vidjet ćete da je većina, ako ne i dvije trećine objekata zatvorena u . Čak i sa pojavom HTML5 i pojavom ozbiljnih konkurenata u obliku članka ili zaglavlja, on nastavlja da se svuda ubacuje u markup. Stoga predlažem da shvatite pitanje formatiranja i centriranja div blokova.
Šta je DIVNaziv elementa dolazi od engleske riječi division, što znači podjela. Kada se piše markup, koristi se za razbijanje elemenata u blokove. DIV-ovi obuhvataju grupe sadržaja na web stranici. Na primjer, slike, odlomci s tekstom. Oznaka ni na koji način ne utiče na prikaz sadržaja i ne nosi nikakvo semantičko opterećenje.
DIV podržava sve globalne atribute. Ali za web dizajn trebate samo dva - class i id. Svih drugih ćete se sjećati samo u egzotičnim slučajevima, a to nije činjenica. Atribut align, koji se ranije koristio za centriranje ili lijevo poravnanje divova, je zastario.
Zamislite da je stranica hladnjak, a DIV-ovi plastični kontejneri u koje trebate sortirati sadržaj. Ne biste stavljali voće u isti kontejner sa jetrenim jetrenjem. Svaku vrstu proizvoda stavljate posebno. Web sadržaj se generira na sličan način.
Otvorite bilo koju web stranicu i podijelite je na smislene blokove. Zaglavlje na vrhu, podnožje na dnu, glavni tekst u sredini. Sa strane se obično nalazi manja kolona sa reklamnim sadržajem ili oblak oznaka.
Dokument
Sada pogledajte svaki odjeljak detaljnije. Počnite sa zaglavljem. Zaglavlje stranice ima poseban logo, navigaciju, naslov prvog nivoa, a ponekad i slogan. Dodijelite svakom semantičkom bloku vlastiti kontejner. Ovo ne samo da će razdvojiti elemente u toku, već će ih i olakšati za formatiranje. Biće vam mnogo lakše centrirati objekat u DIV oznaci dajući mu klasu ili ID.
Prilikom prikazivanja web elemenata, pretraživač uzima u obzir tri svojstva: padding, margine i border. Padding je prostor između sadržaja i njegove granice. Margina - polja koja odvajaju jedan objekt od drugog. Granica je linija duž blokova. Mogu se dodijeliti svima odjednom ili samo jednoj strani:
div( granica: 1px čvrsta #333; granica lijevo: nema; )Ova svojstva dodaju prostor između objekata i pomažu vam da ih pravilno poravnate i postavite. Na primjer, ako blok sa slikom treba pomaknuti od lijevog ruba prema sredini za 20%, elementu dodjeljujete vrijednost margine lijevo od 20%:
Block-with-img( margin-left: 20%; )
Elementi se također mogu formatirati koristeći njihove vrijednosti širine i negativni padding. Na primjer, postoji blok dimenzija 200px x 200px. Prvo, dodijelimo mu apsolutnu poziciju i pomjerimo ga u centar za 50%.
Div( pozicija: apsolutna; lijevo: 50%; )
Sada, da bismo osigurali da je centrirani DIV savršeno pozicioniran, dajemo mu negativnu marginu s lijeve strane jednaku 50% njegove širine, odnosno -100 piksela:
Margin-left: -100px;
U CSS-u se to naziva "uklanjanje zraka". Ali ima značajan nedostatak u potrebi za stalnim proračunima, što je prilično teško učiniti za elemente s nekoliko nivoa ugniježđenja. Ako su specificirane vrijednosti paddinga i granice širine, pretraživač će prema zadanim postavkama izračunati dimenzije kontejnera kao zbir debljine ivica, paddinga s desne i lijeve strane i samog sadržaja unutar, što može takođe biti iznenađenje.
Dakle, kada trebate centrirati DIV, koristite svojstvo box-sizing sa vrijednošću border-box. Ovo će spriječiti pretraživač da doda vrijednosti za popunjavanje i ivice ukupnoj širini DIV elementa. Da biste podigli ili spustili element, koristite i negativne vrijednosti. Ali u ovom slučaju, oni se mogu dodijeliti ili gornjem ili donjem polju spremnika.
Kako centrirati DIV blok koristeći automatske margineOvo je jednostavan način za centriranje velikih blokova. Jednostavno dodijelite širinu kontejnera i svojstvo margine auto. Pregledač će postaviti blok u sredinu sa jednakim marginama lijevo i desno, obavljajući sav posao sam. Kao rezultat toga, ne rizikujete da se zbunite u matematičkim proračunima i značajno uštedite svoje vrijeme.
Koristite metodu automatskog polja kada razvijate responzivne aplikacije. Glavna stvar je da se kontejneru dodeli vrednost širine u em ili procentima. Kod u gornjem primjeru će centrirati DIV i na bilo kojem uređaju, uključujući mobilne telefone, zauzimat će 90% ekrana.
Poravnanje preko svojstva prikaza: inline-blockPo defaultu, DIV elementi se smatraju blok elementima, a njihova prikazana vrijednost je blok. Za ovu metodu morat ćete nadjačati ovo svojstvo. Pogodno samo za DIV-ove sa roditeljskim kontejnerom:
Bilo koji tekst
Elementu sa outer-div klasom se dodeljuje svojstvo text-align sa vrednošću centra, koje centrira tekst unutra. Ali za sada pretraživač vidi ugniježđeni DIV kao blok objekt. Da bi svojstvo text-align funkcionisalo, unutrašnji div mora se tretirati kao mala slova. Dakle, u CSS tabeli za inner-div selektor pišete sledeći kod:
Unutrašnji-div (prikaz: inline-blok; )
Svojstvo prikaza mijenjate iz block u inline-block.
Kaskadni listovi stilova omogućavaju pomicanje, košenje, rotiranje i na drugi način transformaciju web elemenata po želji. Za to se koristi svojstvo transformacije. Vrijednosti ukazuju na željeni tip transformacije i stepen. U ovom primjeru radit ćemo s prijevodom:
transform: translate(50%, 50%);Funkcija prevođenja pomiče element sa njegove trenutne pozicije lijevo/desno i gore/dolje. Dvije vrijednosti se prenose u zagradama:
- stepen horizontalnog kretanja;
- stepen vertikalnog pomeranja.
Ako element treba pomicati samo duž jedne od koordinatnih osi, tada nakon riječi translate naznačite naziv ose i u zagradi iznos potrebnog pomaka:
Transformacija: translateY(-20%);
U nekim priručnicima možete pronaći transformaciju s prefiksima dobavljača:
Webkit-transform: translate(50%, 50%); -ms-transform: prevesti (50%, 50%); transform: translate(50%, 50%);
U 2018. to više nije potrebno; svojstvo podržavaju svi pretraživači, uključujući Edge i IE.
Da bismo centrirali DIV koji želimo, CSS translate funkcija je napisana sa vrijednošću od 50% za vertikalnu i horizontalnu osu. Ovo će uzrokovati da pretraživač pomakne element od njegove trenutne pozicije za polovinu njegove širine i visine. Svojstva širine i visine moraju biti specificirana:
Dokument .nav-bar( prikaz: blok; širina: 90%; visina: 100vh; margina: 0 auto; pozadina: linearni gradijent (lijevo, crvena, #f06d06); ) .navigacija( širina: 50%; visina: 50%; boja: #FFF; granica: 1px isprekidana #F5F2F2; transformacija: translate(50%, 50%); ) Evo malo teksta
Imajte na umu da se element na koji je primijenjeno svojstvo transformacije kreće neovisno o objektima koji ga okružuju. S jedne strane, ovo je zgodno, ali ponekad pomicanjem DIV može preklopiti drugi kontejner. Stoga se ova metoda centriranja web komponenti smatra nestandardnom i koristi se samo u slučajevima krajnje nužde. Za animaciju se koriste transformacije prema svim CSS kanonima.
Flexbox se smatra sofisticiranim načinom dizajniranja web izgleda. Ali ako ga savladate, shvatit ćete da je mnogo jednostavniji i ugodniji od standardnih metoda formatiranja. Flexbox specifikacija je fleksibilan i neverovatno moćan način rukovanja elementima. Naziv modula sa engleskog je preveden kao „fleksibilni kontejner“. Vrijednosti širine, visine i rasporeda elemenata se podešavaju automatski, bez izračunavanja uvlaka i margina.
U prethodnim primjerima, već smo radili sa svojstvom display, ali smo ga postavili na block i inline-block vrijednosti. Za kreiranje flex rasporeda koristićemo display: flex. Prvo nam je potreban flex kontejner:
Da bismo ga pretvorili u flex kontejner u kaskadnim tabelama, pišemo:
Flex-container( display: flex; )
Svi ugniježđeni objekti, ali samo direktni potomci, bit će flex elementi:
Prvi drugi Treći Četvrti
Ako stavite listu unutar flex kontejnera, onda se stavke li liste ne smatraju flex elementima. Flexbox raspored će raditi samo na ul:
Pravila za postavljanje fleks elemenata
Da biste upravljali flex stavkama, trebate justify-content i align-items. Ovisno o vrijednostima koje odredite, ova dva svojstva automatski postavljaju objekte prema potrebi. Ako trebamo centrirati sve ugniježđene DIV-ove, pišemo justify-content: center, align-items: center i ništa drugo. Pregledač će sam obaviti ostatak posla:
Dokument .flex-container (prikaz: flex; justify-content: centar; align-items: centar; ) Prvi Drugi Treći Četvrti
Za centriranje teksta na DIV-ove koji su fleksibilne stavke, možete koristiti standardnu tehniku poravnanja teksta. Ili možete napraviti svaki ugniježđeni DIV i flex kontejner i upravljati sadržajem koristeći justify-content. Ova metoda je mnogo racionalnija ako sadrži različite sadržaje, uključujući grafiku, druge ugniježđene objekte, uključujući liste na više nivoa.
Centriranje elemenata okomito pomoću CSS-a je zadatak koji programerima predstavlja određenu poteškoću. 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 centriranjaHorizontalno centriranje je vrlo jednostavno i lako. Kada je centrirani element inline, koristimo svojstvo poravnanja u odnosu na roditeljski element. Kada je element na nivou bloka, postavljamo njegovu širinu i automatsko podešavanje lijeve i desne margine.
Većina ljudi, kada koristi svojstvo text-align:, poziva se na svojstvo vertical-align za vertikalno centriranje. Sve izgleda sasvim logično. Ako ste koristili šablone tabela, verovatno ste intenzivno koristili atribut valign, koji učvršćuje uverenje da je vertikalno poravnanje pravi način za rešavanje problema.
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 je relativna u odnosu na roditeljski inline element.
- U redu teksta, poravnanje je relativno u odnosu na visinu reda.
- Ćelija tabele koristi poravnanje u odnosu na vrednost izračunatu posebnim algoritmom (obično visina reda).
Ali, nažalost, svojstvo vertical-align ne radi na elementima na nivou bloka (na primjer, paragrafi unutar elementa div). Ova situacija može dovesti do pomisli da ne postoji rješenje za problem vertikalnog poravnanja.
Ali postoje i druge metode za centriranje blok elemenata, čiji izbor ovisi o tome što se centrira u odnosu na vanjski kontejner.
Metoda visine linijeOva metoda radi kada želite da centrirate jedan red teksta okomito. Sve što treba da uradite je da podesite visinu reda da bude veća od veličine fonta.
Prema zadanim postavkama, bijeli 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:Obavezni tekst
CSS:#dijete (visina linije: 200px;)
Ova metoda radi u svim pretraživačima, iako se može koristiti samo za jedan red. Vrijednost 200 px u primjeru je odabrana proizvoljno. Možete koristiti bilo koju vrijednost veću od veličine fonta teksta.
Centriranje slike pomoću linije-visineŠta ako je sadržaj slika? Hoće li gornja metoda funkcionirati? Odgovor leži u još jednom redu CSS koda.
HTML:
#parent (line-height: 200px; ) #parent img (vertical-align: middle;)
Vrijednost svojstva line-height mora biti veća od visine slike.
Metoda CSS tabeleGore je spomenuto da se svojstvo vertical-align koristi za ćelije tablice, gdje odlično funkcionira. Možemo prikazati naš element kao ćeliju tabele i koristiti svojstvo vertical-align na njemu da vertikalno centriramo sadržaj.
Napomena: CSS tabela nije isto što i HTML tabela.
HTML:Sadržaj
CSS:#parent (prikaz: stol;) #dijete (prikaz: ćelija-tabela; vertikalno-poravnanje: sredina; )
Postavljamo izlaz tabele na roditeljski element div i izlazimo ugniježđeni div element kao ćeliju tabele. Sada možete koristiti svojstvo vertical-align na unutrašnjem kontejneru. Sve u njemu će biti centrirano okomito.
Za razliku od gornje metode, u ovom slučaju sadržaj može biti dinamičan jer će div element mijenjati veličinu u skladu sa svojim sadržajem.
Nedostatak ove metode je što ne radi u starijim verzijama IE. Morate koristiti svojstvo display: inline-block za ugniježđeni kontejner.
Apsolutno pozicioniranje i negativne margineOva metoda također radi u svim pretraživačima. Ali zahtijeva da se elementu koji je centriran dobije 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 elementa. Zatim postavljamo svojstva vrha i lijevog ugniježđenog elementa div na 50%, što odgovara centru roditeljskog elementa. Ali centar je gornji lijevi ugao ugniježđenog elementa. Stoga ga trebate podići (pola visine) i pomaknuti ulijevo (pola širine), a onda će se središte poklopiti sa središtem roditeljskog elementa. Dakle, poznavanje visine elementa u ovom slučaju je neophodno. Zatim postavljamo element sa negativnim gornjim i levim marginama jednakim polovini visine i širine, respektivno.
Ova metoda ne radi u svim pretraživačima.
Apsolutno pozicioniranje i istezanjePrimjer 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.
Postavljanje margina za automatsko generiranje na svim stranama će postaviti jednake vrijednosti na sve 4 strane i centrirati naš ugniježđeni div element na njegov roditeljski element.
Nažalost, ova metoda ne radi u IE7 i starijim verzijama.
Jednaki prostori iznad i ispodU ovoj metodi, jednaki padding je eksplicitno postavljen iznad i ispod nadređenog elementa.
HTML:Sadržaj
CSS:#roditelj (dodaci: 5% 0; ) #dijete (dodaci: 10% 0; )
Primjer CSS koda postavlja gornji i donji padding za oba elementa. Za ugniježđeni element, postavljanje dopuna će poslužiti za vertikalno centriranje. A padding roditeljskog elementa će centrirati ugniježđeni element unutar njega.
Relativne mjerne jedinice se koriste za dinamičku promjenu veličine elemenata. A za apsolutne mjerne jedinice morat ćete napraviti proračune.
Na primjer, ako roditeljski element ima visinu od 400px, a ugniježđeni element je 100px, tada je potrebno 150px dopuna na vrhu i dnu.
150 + 150 + 100 = 400
Korišćenje % omogućava vam da prepustite proračune pretraživaču.
Ova metoda djeluje svuda. Loša strana je potreba za proračunima.
Napomena: Ova metoda radi tako što postavlja vanjski padding elementa. Također možete koristiti margine unutar elementa. Odluka o korištenju margina ili paddinga mora se donijeti ovisno o specifičnostima projekta.
plutajući divOva 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 postavljen 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 (jasno: oba; visina: 100px; )
Prazni div pomjeramo lijevo ili desno i postavljamo njegovu visinu na 50% roditeljskog elementa. Na ovaj način će ispuniti gornju polovinu roditeljskog elementa.
Pošto je ovaj div plutajući, on je uklonjen iz normalnog toka dokumenta, i moramo da odmotamo tekst na ugniježđenom elementu. U primjeru se koristi clear: oba , ali sasvim je dovoljno koristiti isti smjer kao pomak plutajućeg praznog div elementa.
Gornja granica ugniježđenog elementa div je direktno ispod donje ivice praznog elementa div. Moramo pomaknuti ugniježđeni element za polovinu visine plutajućeg praznog elementa. Da biste riješili problem, koristite negativnu vrijednost svojstva 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čakSve 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.
18.02.15. 21.4KAko uđete u bilo koju web stranicu kreiranu na bazi html-a, tada ćete vidjeti određenu slojevitu strukturu. Štaviše, njegov izgled će biti sličan slojevitoj torti. Ako tako mislite, onda najvjerovatnije niste jeli dugo vremena. Dakle, prvo zadovoljite svoju glad, a onda ćemo vam reći kako da centrirate div sloj na vašoj web lokaciji:
Prednosti rasporeda pomoću oznakePostoje dvije glavne vrste strukture web stranice:
- Tabularni;
- Blokiraj.
Tabelarni raspored je bio dominantan čak i u zoru interneta. Njegove prednosti uključuju tačnost navedenog pozicioniranja. Ali, ipak, ima očigledne nedostatke. Glavni su dužina koda i mala brzina učitavanja.
Kada koristite izgled tabele, web stranica neće biti prikazana dok se potpuno ne učita. Dok se koriste div blokovi, elementi se prikazuju odmah.
Osim velike brzine učitavanja, blok konstrukcija web stranice vam omogućava da nekoliko puta smanjite količinu 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 prikaz tabela.
Konstrukcija blokova zasnovana na tagovima se takođe naziva sloj po sloj, a sami blokovi se nazivaju slojevi. To je zato što kada se koriste određene vrijednosti svojstva, one se mogu naslagati jedna na drugu, slično slojevima u Photoshopu.
Pomagala za pozicioniranjeU blok rasporedu, bolje je pozicionirati slojeve pomoću kaskadnih stilova. Glavno CSS svojstvo odgovorno za izgled je float.
Sintaksa svojstva:
float: lijevo | desno | nijedan | nasljediti
gdje:
- lijevo – poravnajte element sa lijevom ivicom ekrana. Protok oko preostalih elemenata odvija se na desnoj strani;
- desno – poravnanje desno, tok oko ostalih elemenata – lijevo;
- nema – zamotavanje nije dozvoljeno;
- inherit – nasljeđuje vrijednost roditeljskog elementa.
Pogledajmo lagani primjer pozicioniranja divova koristeći ovo svojstvo:
#left ( širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,51,102); ) #right ( širina: 200px; visina: 100px; float: desno; pozadina: rgb(0,255,153); ) Lijevi blok Desni blok
Sada ćemo pokušati koristiti isto svojstvo da pozicioniramo treći div u centru stranice. Ali, nažalost, float nema središnju vrijednost. A kada novom bloku date vrijednost poravnanja udesno ili ulijevo, on se pomiče u određenom smjeru. Stoga, sve što ostaje je postaviti float: left na sva tri bloka:
Ali ni ovo nije najbolja opcija. Kada se prozor smanji, svi slojevi se ređaju u jedan red okomito, a kada se veličina poveća, drže se za lijevu ivicu prozora. Dakle, potreban nam je bolji način da centriramo div. Centriranje slojeva
U sljedećem primjeru koristit ćemo sloj kontejnera u koji ćemo smjestiti preostale 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 margine od gornje ivice i auto sa strane (margina: 0 auto ):
#container ( širina: 600px; margina: 0 auto; ) #left ( širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,51,102); ) #right ( širina: 200px; visina: 100px; float : lijevo; pozadina: rgb(0,255,153); ) #center (širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,0,0); ) Lijevi blok Centralni blok Desni blok
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 njegova css klasa bi trebala izgledati ovako:
Nakon promjene, svi blokovi će biti poređani striktno u nizu u sredini. Njihov položaj se neće promijeniti bez obzira na veličinu prozora pretraživača. Evo kako izgleda vertikalno centriranje diva:
U sljedećem primjeru, koristili smo brojna nova css svojstva za centriranje slojeva unutar kontejnera:
#kontejner ( širina: 450px; visina:150px; margina:0 auto; background-color:#66CCFF; ) #left (širina: 100px; visina: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: srednja; margin-left: 35px; ) #desno (širina: 100px; visina: 100px; pozadina: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( širina: 100px; visina: 100px; pozadina: rgb(255,0,0); display: inline-block; vertikalno poravnanje: sredina; margin-left: 35px; )
Kratak opis css svojstava i njihovih vrijednosti koje smo koristili u ovom primjeru da centriramo div unutar diva:
- display: inline-block – poravnava blok element u liniju i osigurava da se omota oko drugog elementa;
- vertikalno poravnanje: sredina – poravnava element u sredini u odnosu na roditelj;
- margin-left – postavlja lijevu marginu.
Koliko god čudno zvučalo, 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:
#layer1( širina: 500px; visina: 100px; pozadina: rgb(51,255,204); border:groove; ) a (prikaz: blok; poravnanje teksta: centar; visina: 100%; boja: rgb(255,0,51) ;) Link na našu web stranicu
U ovom primjeru, koristeći line display: block, postavljamo vezu na vrijednost elementa bloka. I tako da cijela visina div bloka postane veza, postavite visinu: 100%. Skrivanje i prikazivanje blok elemenata
Blok elementi pružaju više mogućnosti za proširenje funkcionalnosti sučelja nego zastarjeli tabelarni izgled. Često se dešava da je dizajn web stranice jedinstven i prepoznatljiv. Ali za takvu ekskluzivu morate platiti nedostatkom slobodnog prostora.
To se posebno odnosi na glavnu stranicu, na kojoj je cijena oglašavanja najviša. Stoga nastaje problem gdje "gurnuti" još jedan reklamni baner. I ovdje se ne možete izvući s poravnavanjem diva sa središtem stranice!
Racionalnije rješenje je da neki blok bude skriven. Evo jednostavnog primjera takve implementacije:
#layer1( display:block; širina: 500px; visina: 100px; background: rgb(51,255,204); border:groove; ) funkcija show() ( if(layer1=="none") ( layer1="block"; ) ostalo ( layer1="none"; ) document.getElementById("layer1").style.display=layer1; )
Ovo je magično dugme. Klikom na njega će se sakriti ili prikazati skriveni blok.
