Do sada smo elemente poravnavali samo ulijevo. Točnije, ti i ja to uopće nismo učinili, a sam preglednik prema zadanim postavkama poravnava elemente ulijevo. Naravno, bilo bi predosadno sve poravnati ulijevo. Stoga postoje različiti načini za centriranje i desno poravnanje.
Poravnanje elemenata je nešto što jednostavno trebate znati kada to radite. Prvo što trebate učiniti je upisati jednostavnu stranicu.
Jednom davno pojavila se oznaka, sada vam ne savjetujem da je koristite, zbog dostupnosti modernijih metoda, ali ne mogu ne spomenuti je. Vrlo je, vrlo jednostavan za korištenje. Sve što trebate da bude centrirano, postavljate unutar ove oznake. Na primjer, ovdje poravnavamo naslov 1. razine sa središtem.
Možete dodati sliku, također poravnatu prema sredini, također prijeđimo na sljedeći red pomoću oznake
:
Naslov 1. razine, poravnat po sredini
Bila je to oznaka koja je već zastarjela, osim toga, suprotno vašim očekivanjima, oznake jednostavno ne postoje. Recimo da je lijevo poravnato prema zadanim postavkama, središte je poravnato pomoću oznake, ali što je s desnim?
Kako bi riješili ovaj problem, programeri su smislili univerzalni način poravnavanja HTML elemenata. Metoda je korištenje takozvanih spremnika, koji se stvaraju pomoću oznake. Odnosno, sve što treba staviti u određeni spremnik nalazi se unutar oznake. A ova oznaka već ima atribut "poravnaj", čija vrijednost određuje položaj ovog spremnika. Postoje tri vrijednosti: "lijevo", "u sredini", "desno". Standardno je "lijevo", međutim, mislim da vas to ne čudi.
Napišimo sada isti HTML kod, ali koristeći spremnike, osim toga, ne poravnajmo u sredinu, već udesno.
Kao što vidite, sve radi. Savjetujem vam da također promijenite vrijednosti atributa "align" kako biste pogledali druge vrste poravnanja sadržaja spremnika.
Još jedan način poravnavanja HTML elemenata je pomoću tablica, ali ova tema zaslužuje zasebnu raspravu, pa ćemo o njoj govoriti u sljedećem članku.
Za sada bi vaša stranica trebala izgledati ovako:
Naslov 1. razine, poravnat po sredini
Naslov 1. razine, desno poravnat
S poštovanjem, Mihail Rusakov.
p.s. Ako želite naučiti više o HTML-u, pogledajte moj besplatni tečaj s primjerom izrade web stranice u HTML-u:
Vrlo često je u layoutu potrebno neki element centrirati vodoravno i/ili okomito. Stoga sam odlučio napraviti članak s različitim načinima centriranja kako bi sve bilo pri ruci na jednom mjestu.
Margina vodoravnog poravnanja: autoHorizontalno poravnanje pomoću margine koristi se kada je poznata širina centriranog elementa. Radi za blok elemente:
Elem ( margin-lijevo: auto; margina-desno: auto; širina: 50%; )
Određivanje auto za desnu i lijevu marginu čini ih jednakima, što centrira element vodoravno unutar nadređenog bloka.
poravnanje teksta: središteOva metoda je prikladna za centriranje teksta unutar bloka. poravnanje teksta: centar:
Poravnanje pomoću text-align .wrapper ( text-align: center; )
Poravnan sam u sredini
pozicija i negativna margina lijevoPrikladno za centriranje blokova poznate širine. Dajemo poziciju nadređenog bloka: relativnu u odnosu na poziciju, središnju poziciju elementa: apsolutnu, lijevu: 50% i negativnu lijevu marginu čija je vrijednost jednaka polovici širine elementa:
Poravnanje s položajem .wrapper ( položaj: relativan; ) .wrapper p ( lijevo: 50%; margina: 0 0 0 -100px; položaj: apsolutni; širina: 200px; )
Poravnan sam u sredini
prikaz: inline-block + text-align: centerMetoda je prikladna za poravnavanje blokova nepoznate širine, ali zahtijeva roditelja omotača. Na primjer, možete centrirati horizontalni izbornik na ovaj način:
Poravnanje s prikazom: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )
Okomito poravnanje visina linijeDa biste poravnali jedan redak teksta, možete koristiti iste vrijednosti visine i proreda za nadređeni blok. Prikladno za gumbe, stavke izbornika itd.
line-height .wrapper (visina: 100px; line-height: 100px;)
Okomito sam poravnat
pozicija i negativna margina goreElement se može okomito poravnati davanjem fiksne visine i primjenom pozicije: apsolutne i negativne margine prema gore jednake polovici visine elementa koji se poravnava. Roditeljskom bloku mora se dati položaj: relativno:
Omotač (pozicija: relativna; ) element ( visina: 200 px; margina: -100 px 0 0; pozicija: apsolutna; vrh: 50%; )
Na ovaj način, pomoću pozicioniranja i negativnih margina, možete centrirati element na stranici.
prikaz: tablica-ćelijaZa okomito poravnanje, svojstvo display: table-cell primjenjuje se na element, što ga prisiljava da emulira ćeliju tablice. Također postavljamo njegovu visinu i okomito poravnavanje: sredina. Zamotajmo sve ovo u kontejner sa svojstvom dislpay: table; :
Prikaz okomitog poravnanja: ćelija-tablice .wrapper ( prikaz: tablica; širina: 100%; ) .ćelija ( prikaz: ćelija-tablice; visina: 100 px; okomito poravnanje: sredina; )
Okomito sam poravnat
Dinamičko poravnanje elementa na straniciProučili smo načine za poravnavanje elemenata na stranici pomoću CSS-a. Sada pogledajmo implementaciju jQueryja.
Povežimo jQuery sa stranicom:
Predlažem pisanje jednostavne funkcije za centriranje elementa na stranici, nazovimo je alignCenter() . Sam element djeluje kao argument funkcije:
Funkcija alignCenter(elem) ( // kodirajte ovdje )
U tijelu funkcije dinamički izračunavamo i dodjeljujemo koordinate središta stranice svojstvima CSS lijevo i gore:
Funkcija alignCenter(elem) ( elem.css(( lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem. visina()) / 2 + "px" // ne zaboravite dodati position: absolute elementu za pokretanje koordinata )) )
U prvom retku funkcije dobivamo širinu dokumenta i od njega oduzimamo širinu elementa, podijeljenu na pola - to će biti vodoravno središte stranice. Drugi red radi istu stvar, samo s visinom za okomito poravnanje.
Funkcija je spremna, preostaje ju priložiti događajima spremnosti DOM-a i promjene veličine prozora:
$(function() ( // pozovi funkciju za centriranje kada je DOM spreman alignCenter($(elem)); // pozovi funkciju prilikom promjene veličine prozora $(window).resize(function() ( alignCenter($(elem) )); px", vrh: ($(window).height() - elem.height()) / 2 + "px" )) ) ))
Primjena FlexboxaNove značajke CSS3, kao što je Flexbox, postupno postaju uobičajene. Tehnologija pomaže u stvaranju oznaka bez korištenja float-ova, pozicioniranja itd. Također se može koristiti za centriranje elemenata. Na primjer, primijenite Flexbox na nadređeni element.wrapper i centrirajte sadržaj unutra:
Omotač ( display: -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 vodoravna */ /* margina: samo okomita */ ) Lorem ipsum dolor sit amet
Ovo pravilo centrira element vodoravno i okomito u isto vrijeme - margina sada funkcionira ne samo za vodoravno poravnanje, već i za okomito. I to bez poznate širine/visine.
Povezani resursi Pomozite projektuWeb dizajneri koriste DIV-ove u svom radu svaki dan. Bez ikakvog podcjenjivanja, ovo je najpopularnija oznaka. Otvorite izvorni kod bilo kojeg web mjesta i vidjet ćete da je većina, ako ne i dvije trećine objekata zatvoreno u . Čak i s dolaskom HTML5 i pojavom ozbiljnih konkurenata u obliku članka ili zaglavlja, nastavlja se posvuda umetati u oznake. Stoga predlažem da razumijete pitanje formatiranja i centriranja div blokova.
Što je DIVNaziv elementa dolazi od engleske riječi division, što znači dijeljenje. Prilikom pisanja markupa koristi se za rastavljanje elemenata u blokove. DIV-ovi obuhvaćaju grupe sadržaja na web stranici. Na primjer, slike, odlomci s tekstom. Oznaka ni na koji način ne utječ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 ostalih ćete se sjetiti samo u egzotičnim slučajevima, a to nije činjenica. Atribut align, koji se koristio za centriranje ili lijevo poravnanje divova, je zastario.
Zamislite da je mjesto hladnjak, a DIV-ovi su plastični spremnici u koje trebate sortirati sadržaj. Voće ne biste stavili u istu posudu s jetrenicom. Svaku vrstu proizvoda ćete postaviti zasebno. Web sadržaj generira se na sličan način.
Otvorite bilo koje web mjesto i podijelite ga na smislene blokove. Zaglavlje na vrhu, podnožje na dnu, glavni tekst u sredini. Sa strane se obično nalazi manji stupac s reklamnim sadržajem ili oblakom oznaka.
Dokument
Sada pogledajte svaki odjeljak detaljnije. Počnite s zaglavljem. Zaglavlje stranice ima zaseban logotip, navigaciju, naslov prve razine, a ponekad i slogan. Svakom semantičkom bloku dodijelite vlastiti spremnik. To ne samo da će razdvojiti elemente u toku, već će ih i olakšati formatiranje. Bit će vam mnogo lakše centrirati objekt u DIV oznaci dajući mu klasu ili ID.
Prilikom renderiranja web elemenata, preglednik 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( border: 1px solid #333; border-left: none; )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 dodijelite vrijednost lijeve margine od 20%:
Block-with-img( margin-left: 20%; )
Elementi se također mogu oblikovati korištenjem vrijednosti širine i negativnog ispuna. Na primjer, postoji blok s dimenzijama 200px x 200px. Prvo mu dodijelimo apsolutni položaj i pomaknimo ga u središte za 50%.
Div( pozicija: apsolutna; lijevo: 50%; )
Sada, kako bismo osigurali da je centrirani DIV savršeno postavljen, dajemo mu negativnu marginu ulijevo jednaku 50% njegove širine, što je -100 piksela:
Margin-lijevo: -100px;
U CSS-u se to zove "uklanjanje zraka". Ali ima značajan nedostatak u potrebi za stalnim izračunima, što je prilično teško učiniti za elemente s nekoliko razina gniježđenja. Ako su navedene vrijednosti ispune i širine obruba, preglednik će prema zadanim postavkama izračunati dimenzije spremnika kao zbroj debljine obruba, ispune s desne i lijeve strane i samog sadržaja unutra, što može također doći kao iznenađenje.
Dakle, kada trebate centrirati DIV, koristite svojstvo box-sizing s vrijednošću border-box. To će spriječiti preglednik da doda vrijednosti ispune i obruba ukupnoj širini DIV elementa. Za podizanje ili spuštanje elementa također koristite negativne vrijednosti. Ali u ovom slučaju, mogu se dodijeliti bilo gornjem ili donjem polju spremnika.
Kako centrirati DIV blok pomoću automatskih marginaOvo je jednostavan način za centriranje velikih blokova. Jednostavno dodijelite širinu spremnika i svojstvo margine na auto. Preglednik će postaviti blok u sredinu s jednakim marginama s lijeve i desne strane, obavljajući sav posao sam. Kao rezultat toga, ne riskirate da se zbunite u matematičkim izračunima i značajno štedite svoje vrijeme.
Koristite metodu automatskog polja kada razvijate responzivne aplikacije. Glavna stvar je dodijeliti vrijednost širine spremniku u em ili postotku. Kôd u gornjem primjeru centrirat će DIV i na bilo kojem uređaju, uključujući mobilne telefone, zauzimat će 90% zaslona.
Poravnanje putem svojstva prikaza: inline-blockPrema zadanim postavkama, DIV elementi se smatraju blok elementima, a njihova vrijednost za prikaz je blok. Za ovu metodu morat ćete nadjačati ovo svojstvo. Prikladno samo za DIV-ove s nadređenim spremnikom:
Bilo koji tekst
Elementu s klasom outer-div dodijeljeno je svojstvo text-align s vrijednošću center, koja centrira tekst unutra. Ali za sada preglednik vidi ugniježđeni DIV kao blok objekt. Da bi svojstvo poravnanja teksta radilo, inner-div se mora tretirati kao mala slova. Dakle, u CSS tablicu za inner-div selektor napišete sljedeći kod:
Inner-div( display: inline-block; )
Promijenite svojstvo prikaza iz block u inline-block.
Kaskadni listovi stilova omogućuju pomicanje, naginjanje, rotiranje i na druge načine transformiranje web elemenata po želji. Za to se koristi svojstvo transformacije. Vrijednosti pokazuju željenu vrstu i stupanj transformacije. U ovom primjeru radit ćemo s prijevodom:
transformiraj: prevedi (50%, 50%);Funkcija prevođenja pomiče element s njegovog trenutnog položaja lijevo/desno i gore/dolje. U zagradama se prenose dvije vrijednosti:
- stupanj horizontalnog kretanja;
- stupanj vertikalnog kretanja.
Ako se element treba pomaknuti duž samo jedne od koordinatnih osi, tada nakon riječi translate navedite naziv osi i u zagradi iznos potrebnog pomaka:
Transformacija: translateY(-20%);
U nekim priručnicima možete pronaći transformaciju s prefiksima dobavljača:
Webkit-transformacija: prevedi (50%, 50%); -ms-transformacija: prevedi (50%, 50%); transformiraj: prevedi (50%, 50%);
U 2018. to više nije potrebno; svojstvo podržavaju svi preglednici, uključujući Edge i IE.
Kako bismo centrirali DIV koji želimo, CSS translate funkcija je zapisana s vrijednošću od 50% za okomitu i vodoravnu os. To će uzrokovati da preglednik pomakne element u odnosu na njegov trenutni položaj za pola njegove širine i visine. Moraju se specificirati svojstva širine i visine:
Dokument .nav-traka( prikaz: blok; širina: 90%; visina: 100vh; margina: 0 automatski; pozadina: linearni gradijent(lijevo, crveno, #f06d06); ) .navigacija(širina: 50%; visina: 50%; boja: #FFF; isprekidana 1px #F5F2F2; transformacija: prevedi (50%);
Imajte na umu da se element na koji se primjenjuje svojstvo transformacije kreće neovisno o objektima koji ga okružuju. S jedne strane, ovo je prikladno, ali ponekad kada se pomakne, DIV može preklapati drugi spremnik. 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 svladate, shvatit ćete da je puno jednostavniji i ugodniji od standardnih metoda oblikovanja. Flexbox specifikacija je fleksibilan i nevjerojatno moćan način za rukovanje elementima. Naziv modula preveden je s engleskog kao "fleksibilni spremnik". Vrijednosti širine, visine i rasporeda elemenata podešavaju se automatski, bez izračunavanja uvlaka i margina.
U prethodnim smo primjerima već radili sa svojstvom prikaza, ali smo ga postavili na vrijednosti bloka i inline-bloka. Za izradu flex izgleda koristit ćemo display: flex. Prvo trebamo fleksibilni spremnik:
Da bismo ga pretvorili u fleksibilni spremnik u kaskadnim tablicama, pišemo:
Flex-kontejner (zaslon: flex; )
Svi ugniježđeni objekti, ali samo izravni potomci, bit će fleksibilni elementi:
Prvi drugi Treći Četvrti
Ako stavite popis unutar flex spremnika, tada se stavke li popisa ne smatraju flex elementima. Flexbox izgled će raditi samo na ul:
Pravila postavljanja savitljivih elemenata
Za upravljanje fleksibilnim stavkama potrebni su vam justify-content i align-items. Ovisno o vrijednostima koje navedete, 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 više. Preglednik će sam obaviti ostatak posla:
Dokument .flex-container( display: flex; justify-content: center; align-items: center; ) Prvi Drugi Treći Četvrti
Za centriranje teksta na DIV-ovima koji su fleksibilne stavke, možete koristiti standardnu tehniku poravnanja teksta. Ili možete učiniti svaki ugniježđeni DIV također fleksibilnim spremnikom i upravljati sadržajem koristeći justify-content. Ova je metoda mnogo racionalnija ako sadrži raznovrstan sadržaj, uključujući grafiku, druge ugniježđene objekte, uključujući popise na više razina.
Okomito centriranje elemenata pomoću CSS-a zadatak je koji programerima predstavlja određene poteškoće. Međutim, postoji nekoliko metoda za njegovo rješavanje, koje su prilično jednostavne. Ova lekcija predstavlja 6 opcija za okomito centriranje sadržaja.
Počnimo s općim opisom problema.
Problem okomitog centriranjaHorizontalno centriranje je vrlo jednostavno i lako. Kada je centrirani element u liniji, koristimo svojstvo poravnanja u odnosu na nadređeni element. Kada je element na razini bloka, postavljamo njegovu širinu i automatsko postavljanje lijeve i desne margine.
Većina ljudi, kada koristi svojstvo text-align:, poziva se na svojstvo vertical-align za okomito centriranje. Sve izgleda sasvim logično. Ako ste koristili predloške tablica, vjerojatno ste intenzivno koristili atribut valign, koji učvršćuje uvjerenje da je okomito poravnanje pravi način za rješavanje problema.
Ali atribut valign radi samo na ćelijama tablice. A svojstvo okomitog poravnanja vrlo mu je slično. Također utječe na ćelije tablice i neke ugrađene elemente.
Vrijednost svojstva vertical-align relativna je u odnosu na nadređeni inline element.
- U retku teksta, poravnanje je u odnosu na visinu retka.
- Ćelija tablice koristi poravnanje u odnosu na vrijednost izračunatu posebnim algoritmom (obično visina retka).
No, nažalost, svojstvo okomitog poravnanja ne radi na elementima na razini bloka (na primjer, odlomci unutar elementa div). Ova situacija može dovesti do uvjerenja da nema rješenja za problem okomitog poravnanja.
Ali postoje i druge metode za centriranje blok elemenata, čiji izbor ovisi o tome što se centrira u odnosu na vanjski spremnik.
Metoda visine linijeOva metoda funkcionira kada želite okomito centrirati jedan redak teksta. Sve što trebate učiniti je postaviti visinu retka da bude veća od veličine fonta.
Prema zadanim postavkama, bijeli prostor će biti ravnomjerno raspoređen na vrhu i dnu teksta. I linija će biti centrirana okomito. Često je visina linije jednaka visini elementa.
HTML:Obavezan tekst
CSS:#dijete (line-height: 200px;)
Ova metoda radi u svim preglednicima, iako se može koristiti samo za jedan redak. Vrijednost 200 px u primjeru odabrana je proizvoljno. Možete koristiti bilo koju vrijednost veću od veličine fonta teksta.
Centriranje slike pomoću visine linijeŠto ako je sadržaj slika? Hoće li gornja metoda funkcionirati? Odgovor leži u još jednom retku 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 tabliceGore je spomenuto da se svojstvo vertikalnog poravnanja koristi za ćelije tablice, gdje odlično funkcionira. Naš element možemo prikazati kao ćeliju tablice i upotrijebiti svojstvo vertikalnog poravnanja na njemu za okomito centriranje sadržaja.
Napomena: CSS tablica nije isto što i HTML tablica.
HTML:Sadržaj
CSS:#parent (display: table;) #child ( display: table-cell; vertical-align: middle; )
Postavljamo izlaz tablice na nadređeni div element i ispisujemo ugniježđeni div element kao ćeliju tablice. Sada možete koristiti svojstvo vertikalnog poravnanja na unutarnjem spremniku. Sve u njemu bit će 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-a. Morate koristiti svojstvo display: inline-block za ugniježđeni spremnik.
Apsolutno pozicioniranje i negativne maržeOva metoda također radi u svim preglednicima. Ali zahtijeva da se elementu koji se centrira dodijeli visina.
Primjer koda izvodi vodoravno i okomito centriranje u isto vrijeme:
HTML:Sadržaj
CSS:#roditelj (položaj: relativan;) #dijete (položaj: apsolutni; gore: 50%; lijevo: 50%; visina: 30%; širina: 50%; margina: -15% 0 0 -25%; )
Prvo postavljamo vrstu pozicioniranja elementa. Zatim postavljamo svojstva gornje i lijeve strane ugniježđenog div elementa na 50%, što odgovara središtu nadređenog elementa. Ali središte je gornji lijevi kut ugniježđenog elementa. Stoga ga morate podići (polovica visine) i pomaknuti ulijevo (polovica širine), a tada će se središte podudarati sa središtem nadređenog elementa. Dakle, poznavanje visine elementa u ovom slučaju je neophodno. Zatim postavljamo element s negativnim gornjim i lijevim marginama jednakima polovici visine odnosno širine.
Ova metoda ne radi u svim preglednicima.
Apsolutno pozicioniranje i rastezanjePrimjer koda izvodi okomito i vodoravno centriranje.
HTML:Sadržaj
CSS:#roditelj (položaj: relativno;) #dijete (položaj: apsolutni; vrh: 0; dno: 0; lijevo: 0; desno: 0; širina: 50%; visina: 30%; margina: auto; )
Ideja iza ove metode je rastezanje ugniježđenog elementa na sve 4 granice nadređenog elementa postavljanjem svojstava top, bottom, right i left na 0.
Postavljanjem margina za automatsko generiranje na svim stranama postavit će se jednake vrijednosti na sve 4 strane i centrirati naš ugniježđeni div element na njegov nadređeni element.
Nažalost, ova metoda ne radi u IE7 i starijim verzijama.
Jednaki prostori iznad i ispodU ovoj metodi, jednako ispunjavanje je eksplicitno postavljeno iznad i ispod nadređenog elementa.
HTML:Sadržaj
CSS:#parent ( padding: 5% 0; ) #child ( padding: 10% 0; )
Primjer CSS koda postavlja gornje i donje ispune za oba elementa. Za ugniježđeni element, postavljanje ispune poslužit će za okomito centriranje. I ispuna nadređenog elementa centrirat će ugniježđeni element unutar njega.
Relativne mjerne jedinice koriste se za dinamičku promjenu veličine elemenata. A za apsolutne mjerne jedinice morat ćete napraviti izračune.
Na primjer, ako nadređeni element ima visinu od 400 piksela, a ugniježđeni element 100 piksela, tada je potrebno 150 piksela ispune na vrhu i dnu.
150 + 150 + 100 = 400
Korištenje % omogućuje vam da izračune prepustite pregledniku.
Ova metoda radi posvuda. Loša strana je potreba za izračunima.
Napomena: Ova metoda funkcionira postavljanjem vanjskog ispuna elementa. Također možete koristiti margine unutar elementa. Odluka o korištenju margina ili ispuna mora se donijeti ovisno o specifičnostima projekta.
plutajući divOva metoda koristi prazan div element koji pluta i pomaže kontrolirati položaj našeg ugniježđenog elementa u dokumentu. Imajte na umu da se plutajući div nalazi 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: oboje; visina: 100px; )
Pomaknemo prazan div ulijevo ili udesno i postavimo mu visinu na 50% nadređenog elementa. Na taj način ispunit će gornju polovicu nadređenog elementa.
Budući da je ovaj div plutajući, uklonjen je iz normalnog tijeka dokumenta i moramo razmotati tekst na ugniježđenom elementu. Primjer koristi clear: both , ali sasvim je dovoljno koristiti isti smjer kao pomak plutajućeg praznog div elementa.
Gornja granica ugniježđenog div elementa je neposredno ispod donje granice praznog div elementa. Moramo pomaknuti ugniježđeni element prema gore za pola visine plutajućeg praznog elementa. Da biste riješili problem, upotrijebite negativnu vrijednost svojstva margin-bottom za plutajući prazan div element.
Ova metoda također radi u svim preglednicima. Međutim, njegovo korištenje zahtijeva dodatni prazan div element i poznavanje visine ugniježđenog elementa.
ZaključakSve opisane metode jednostavne su za korištenje. Poteškoća je u tome što nijedan od njih nije prikladan za sve slučajeve. Morate analizirati projekt i odabrati onaj koji najbolje odgovara zahtjevima.
18.02.15. 21,4KAko zarežete u bilo koju web stranicu kreiranu na temelju html-a, vidjet ćete određenu slojevitu strukturu. Štoviše, njegov će izgled biti sličan slojevitoj torti. Ako tako mislite, onda najvjerojatnije niste dugo jeli. Dakle, prvo utažite svoju glad, a onda ćemo vam reći kako centrirati div sloj na vašoj stranici:
Prednosti izgleda pomoću oznakePostoje dvije glavne vrste strukture web stranice:
- tablični;
- Blok.
Tablični izgled bio je dominantan čak iu zoru Interneta. Njegove prednosti uključuju točnost navedenog pozicioniranja. Ali, ipak, ima očite nedostatke. Glavni su duljina koda i mala brzina učitavanja.
Kada koristite tablični izgled, web stranica neće biti prikazana dok se potpuno ne učita. Dok se kod korištenja div blokova elementi prikazuju odmah.
Osim velike brzine učitavanja, blok konstrukcija web stranice omogućuje nekoliko puta smanjenje količine html koda. Uključujući korištenje CSS klasa.
Međutim, treba koristiti tablični izgled za strukturiranje prikaza podataka na stranici. Klasičan primjer njegove uporabe je prikaz tablica.
Konstrukcija blokova temeljena na oznakama naziva se i sloj po sloj, a sami blokovi slojevi. To je zato što kada se koriste određene vrijednosti svojstava, one se mogu naslagati jedna na drugu, slično slojevima u Photoshopu.
Pomagala za pozicioniranjeU blok rasporedu, bolje je pozicionirati slojeve pomoću kaskadnih listova stilova. Glavno CSS svojstvo odgovorno za izgled je float.
Sintaksa svojstva:
plovak: lijevo | desno | nijedan | naslijediti
Gdje:
- lijevo – poravnajte element na lijevi rub ekrana. Tijek oko preostalih elemenata događa se s desne strane;
- desno – poravnanje desno, tok oko ostalih elemenata – lijevo;
- ništa – omatanje nije dopušteno;
- naslijediti – nasljeđuje vrijednost nadređenog elementa.
Pogledajmo lagani primjer pozicioniranja divova pomoću ovog svojstva:
#lijevo (širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,51,102); ) #desno (širina: 200px; visina: 100px; float: desno; pozadina: rgb(0,255,153); ) Lijevi blok Desni blok
Sada ćemo pokušati upotrijebiti isto svojstvo za postavljanje trećeg diva u središte stranice. No, nažalost, float nema središnju vrijednost. A kada novom bloku date vrijednost poravnanja udesno ili ulijevo, on se pomiče u navedenom smjeru. Dakle, sve što preostaje je postaviti float: left na sva tri bloka:
Ali ni ovo nije najbolja opcija. Kada se prozor smanji, svi se slojevi poredaju u jedan red okomito, a kada se poveća, lijepe se na lijevi rub prozora. Dakle, trebamo bolji način za centriranje diva. Centriranje slojeva
U sljedećem primjeru koristit ćemo sloj spremnika u koji ćemo smjestiti preostale elemente. Ovo rješava problem pomicanja blokova jedan u odnosu na drugi kada se promijeni veličina prozora. Centriranje spremnika u sredini vrši se postavljanjem svojstava margine na nulu za margine od gornjeg ruba i auto na stranama (margina: 0 auto):
#container (width: 600px; margin: 0 auto; ) #left ( width: 200px; height: 100px; float: left; background: rgb(255,51,102); ) #right ( width: 200px; height: 100px; float : lijevo; pozadina: rgb(0,255,153); #center (širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,0,0); ) Lijevi blok Središnji blok Desni blok
Isti primjer pokazuje kako div možete centrirati vodoravno. A ako malo uredite gornji kod, možete postići okomito poravnanje blokova. Da biste to učinili, samo trebate promijeniti duljinu sloja spremnika (smanjiti ga). Odnosno, nakon uređivanja njegova css klasa trebala bi izgledati ovako:
Nakon promjene, svi blokovi će se poredati strogo u jedan red u sredini. I njihov se položaj neće promijeniti bez obzira na veličinu prozora preglednika. Evo kako izgleda okomito centriranje diva:
U sljedećem primjeru upotrijebili smo niz novih css svojstava za centriranje slojeva unutar spremnika:
#container (width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; ) #left (width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertikalno poravnavanje: sredina; margina-lijevo: 35px; ) #desno (širina: 100px; visina: 100px; pozadina: rgb(0,255,153); prikaz: umetnuti blok; okomito poravnavanje: sredina; margina-lijevo: 35px; ) #center (širina: 100px; visina: 100px; pozadina: rgb(255,0,0); prikaz: inline-block; okomito poravnanje: sredina; margina-lijevo: 35px; )
Kratak opis css svojstava i njihovih vrijednosti koje smo koristili u ovom primjeru za centriranje diva unutar diva:
- prikaz: inline-block – poravnava element bloka u liniju i osigurava da se obavija oko drugog elementa;
- vertical-align: middle – poravnava element u sredini u odnosu na roditelja;
- margin-left – postavlja lijevu marginu.
Koliko god čudno zvučalo, to je moguće. Ponekad div blok kao poveznica može biti potreban prilikom postavljanja raznih vrsta izbornika. Pogledajmo praktičan primjer implementacije sloja veze:
#layer1( width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) a ( display: block; text-align: center; height: 100%; color: 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 od zastarjelog tabelarnog izgleda. Često se događa da je dizajn web stranice jedinstven i prepoznatljiv. Ali za takvu ekskluzivu morate platiti nedostatkom slobodnog prostora.
To se posebno odnosi na glavnu stranicu, na kojoj su troškovi oglašavanja najveći. Stoga se javlja problem gdje “ugurati” još jedan reklamni banner. I ovdje se ne možete izvući s poravnavanjem diva na središte stranice!
Racionalnije rješenje je učiniti neki blok skrivenim. Evo jednostavnog primjera takve implementacije:
#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( sloj1="none"; ) document.getElementById("layer1").style.display=layer1 )
Ovo je čarobni gumb. Klikom na njega sakrit ćete ili prikazati blok za skrivanje.
