Poravnajte blok na sredino strani. Vodoravna in navpična poravnava elementov v CSS

pozdravljena Nadaljujemo z osvajanjem osnov jezika HTML. Poglejmo, kaj morate napisati, da poravnate besedilo na sredino, širino ali robove.

Če se lotimo posla, poglejmo, kako sredinsko besedilo v HTML na tri različne načine. Zadnja dva sta neposredno povezana s slogovnim listom. Lahko je datoteka CSS, ki se poveže s stranmi spletnega mesta in določa njihov videz.

1. način - neposredno delo s HTML

Pravzaprav je čisto preprosto. Glej primer spodaj.

Poravnajte odstavek na sredino.

Če morate fragmente besedila premakniti na drugačen način, potem namesto parametra »center« vnesite naslednje vrednosti:

• poravnati – poravnati besedilo na širino strani;
• desno – na desnem robu;
• levo - levo.

Po analogiji lahko premaknete vsebino, ki je v glavah (h1, h2) in vsebniku (div).

Metoda 2 in 3 - uporaba slogov

Zgoraj predstavljeno zasnovo je mogoče nekoliko spremeniti. Učinek bo enak. Če želite to narediti, morate napisati spodnjo kodo.

Besedilni blok.

V tej obliki je koda zapisana neposredno v HTML, da sredi besedilno vsebino.

Obstaja še en alternativni način za doseganje rezultatov. Narediti boste morali nekaj korakov.

Korak 1. V glavno kodo napišite

Besedilno gradivo.

2. korak. V priloženo datoteko CSS vnesite to kodo:

Rovno (text-align:center;)

Ugotavljam, da je beseda "rovno" samo ime razreda, ki se lahko imenuje drugače. To je prepuščeno programerjevi presoji.

Po analogiji lahko v HTML besedilo preprosto postavite na sredino, poravnano in poravnano na desni ali levi rob strani. Kot lahko vidite, obstaja več kot ena možnost za dosego vašega cilja.

Samo nekaj vprašanj:

• Ali delate informacijski neprofitni projekt?
• Ali želite, da se vaša spletna stran dobro uvršča v iskalnikih?
• Ali želite zaslužiti na spletu?

Če so vsi odgovori pozitivni, si oglejte samo celosten pristop k razvoju spletnih strani. Podatki bodo še posebej koristni, če delujejo na WordPress CMS.

Rad bi poudaril, da so lastne spletne strani le ena od mnogih možnosti za ustvarjanje pasivnega ali aktivnega zaslužka na internetu. Moj blog je posvečen finančnim priložnostim na spletu.

Ste že kdaj delali na področju prometne arbitraže, tekstopisja ali drugih dejavnostih, ki ustvarjajo primarni ali dodatni zaslužek s sodelovanjem na daljavo? O tem in še veliko več lahko izveste zdaj na straneh mojega bloga.

V prihodnje bom objavil veliko res koristnih informacij. Ostanite povezani. Če želite, se lahko naročite na posodobitve Workip po e-pošti. Obrazec za prijavo se nahaja spodaj.

V CSS nekaterih na videz preprostih stvari ni tako enostavno narediti. Ena od teh stvari je poravnava, tj. ko je treba en element na določen način postaviti glede na drugega.

Ta članek predstavlja nekaj že pripravljenih rešitev, ki bodo pomagale poenostaviti delo vodoravnega in/ali navpičnega centriranja elementov.

Opomba: Pod vsako rešitvijo je seznam brskalnikov, ki označuje različice, v katerih deluje navedena koda CSS.

CSS – sredinski blok

1. Poravnava enega bloka s središčem drugega. V tem primeru imata prvi in ​​drugi blok dinamične velikosti.

... ...

Nadrejeni (položaj: relativno; ) .child (položaj: absolutno; levo: 50%; zgoraj: 50%; -webkit-transform: prevedi(-50%, -50%); -moz-transform: prevedi(-50% , -50 %; -pretvorba: prevedi (-50 %, -50 %); ;)

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Poravnava enega bloka s središčem drugega. V tem primeru ima drugi blok fiksne dimenzije.

Parent (position: relative; ) .child ( position: absolute; left: 50%; top: 50%; /* širina in višina 2 blokov */ width: 500px; height: 250px; /* Vrednosti so določene glede na na njegovi velikosti */ /* margin-left = - width / 2 */ margin-left: -250px /* margin-top = - height / 2 */ margin-top: -125px )

Brskalniki, ki podpirajo to rešitev:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Poravnava enega bloka s središčem drugega. V tem primeru ima drugi blok dimenzije, določene v odstotkih.

Nadrejeni ( položaj: relativni; ) .child ( položaj: absolutni; /* širina in višina 2 blokov v % */ višina: 50 %; širina: 50 %; /* Vrednosti so določene glede na njegovo velikost v % * / levo: 25%; /* (100% - širina) / 2 */ zgoraj: 25% /* (100% - višina) / 2 */ )

Brskalniki, ki podpirajo to rešitev:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Vodoravna poravnava

1. Poravnava enega elementa bloka (prikaz: blok) glede na drugega (v katerem se nahaja) vodoravno:

... ...

Blokiraj (levi rob: samodejno; desni rob: samodejno; )

Brskalniki, ki podpirajo to rešitev:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Vodoravno poravnajte element vrstice (prikaz: inline) ali črtni blok (prikaz: inline-block):

... ...

Nadrejeni ( poravnava besedila: sredina; ) .podrejeni ( prikaz: blok v vrstici; )

Brskalniki, ki podpirajo to rešitev:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - navpična poravnava

1. Centrirajte en element (display: inline, display: inline-block) glede na drugega (v katerem se nahaja) v sredini. Nadrejeni blok v tem primeru ima fiksno višino, ki je nastavljena z lastnostjo line-height CSS.

... ...

Nadrejeni (višina vrstice: 500 slikovnih pik;) .podrejeni (zaslon: vstavljeni blok; navpična poravnava: sredina;)

Brskalniki, ki podpirajo to rešitev:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Centriranje enega bloka glede na drugega navpično s predstavitvijo starša kot tabele in otroka kot celico te tabele.

Nadrejeni ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Brskalniki, ki podpirajo to rešitev:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Če poznate druge zanimive trike ali uporabne že pripravljene rešitve za poravnavo, jih delite v komentarjih.

18.02.15 21,4k

Če zarežete v katero koli spletno stran, ustvarjeno na podlagi html-ja, boste videli določeno večplastno strukturo. Poleg tega bo njegov videz podoben plasteni torti. Če tako mislite, potem najverjetneje že dolgo niste jedli. Zato najprej potešite svojo lakoto, nato pa vam bomo povedali, kako plast div postavite na sredino svojega spletnega mesta:

Prednosti postavitve z uporabo oznake

Obstajata dve glavni vrsti strukture spletnega mesta:

• Tabelarno;
• Blokiraj.

Tabelarna postavitev je prevladovala že ob zori interneta. Njegove prednosti vključujejo natančnost določenega pozicioniranja. Toda kljub temu ima očitne pomanjkljivosti. Glavna sta dolžina kode in nizka hitrost nalaganja.

Pri uporabi tabelarične postavitve spletna stran ne bo prikazana, dokler ni popolnoma naložena. Pri uporabi blokov div pa so elementi prikazani takoj.

Bločna konstrukcija spletnega mesta vam poleg visoke hitrosti nalaganja omogoča večkratno zmanjšanje količine html kode. Vključno z uporabo razredov CSS.

Vendar je treba za strukturiranje prikaza podatkov na strani uporabiti tabelarično postavitev. Klasičen primer njegove uporabe je prikaz tabel.

Gradnja blokov na podlagi oznak se imenuje tudi sloj za slojem, sami bloki pa sloji. To je zato, ker se lahko pri uporabi določenih vrednosti lastnosti zložijo eno na drugo, podobno kot plasti v Photoshopu.

Pripomočki za pozicioniranje

Pri blokovni postavitvi je bolje postaviti plasti z uporabo kaskadnih slogovnih listov. Glavna lastnost CSS, odgovorna za postavitev, je float.
Sintaksa lastnosti:
lebdi: levo | desno | nič | dedovati
kje:

• levo – poravnajte element na levi rob zaslona. Tok okoli preostalih elementov se pojavi na desni;
• desno – poravnava na desni, tok okoli drugih elementov – na levi;
• brez – zavijanje ni dovoljeno;
• inherit – podeduje vrednost nadrejenega elementa.

Oglejmo si lahek primer pozicioniranja divov s to lastnostjo:

#left (širina: 200px; višina: 100px; float: levo; ozadje: rgb(255,51,102); ) #desno (širina: 200px; višina: 100px; float: desno; ozadje: rgb(0,255,153); ) Levi blok Desni blok

Zdaj bomo poskušali uporabiti isto lastnost za položaj tretjega diva na sredini strani. Toda na žalost float nima središčne vrednosti. In ko novemu bloku dodelite vrednost poravnave v desno ali levo, se premakne v določeno smer. Zato ostane vse, da nastavimo float: left na vse tri bloke:

Vendar tudi to ni najboljša možnost. Pri pomanjšanju okna se vse plasti navpično postavijo v eno vrsto, pri povečanju pa se prilepijo na levi rob okna. Zato potrebujemo boljši način za centriranje diva. Centriranje plasti

V naslednjem primeru bomo uporabili vsebniški sloj, v katerega bomo postavili preostale elemente. To reši problem premikanja blokov relativno drug glede na drugega, ko se spremeni velikost okna. Centriranje vsebnika na sredini se izvede tako, da se lastnosti robov nastavijo na nič za robove od zgornjega roba in samodejno na straneh (rob: 0 auto):

#vsebnik (širina: 600 slikovnih pik; rob: 0 samodejno; ) #levo (širina: 200 slikovnih pik; višina: 100 slikovnih pik; lebdeče: levo; ozadje: rgb(255,51,102); ) #desno (širina: 200 slikovnih pik; višina: 100 slikovnih pik; lebdeče : levo; ozadje: rgb(0,255,153); #center (širina: 200px; višina: 100px; float: levo; ozadje: rgb(255,0,0); ) Levi blok Sredinski blok Desni blok

Isti primer prikazuje, kako lahko div centrirate vodoravno. In če rahlo uredite zgornjo kodo, lahko dosežete navpično poravnavo blokov. Če želite to narediti, morate samo spremeniti dolžino plasti vsebnika (jo zmanjšati). To pomeni, da bi moral po urejanju njegov razred css izgledati takole:

Po spremembi se bodo vsi bloki postavili strogo v vrsto na sredini. In njihov položaj se ne bo spremenil ne glede na velikost okna brskalnika. Tako izgleda navpično centriranje diva:

V naslednjem primeru smo uporabili številne nove lastnosti css za centriranje plasti znotraj vsebnika:

#vsebnik (širina: 450 slikovnih pik; višina: 150 slikovnih pik; rob: 0 samodejno; barva ozadja: #66CCFF; ) #levo (širina: 100 slikovnih pik; višina: 100 slikovnih pik; ozadje: rgb(255,51,102); zaslon: inline-block; navpična poravnava: sredina; levi rob: 35 pikslov; desno (širina: 100 slikovnih pik; višina: 100 slikovnih pik; ozadje: vstavljeni blok; navpična poravnava: sredina; levi rob: 35 slikovnih pik; ) #center (širina: 100px; višina: 100px; ozadje: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; )

Kratek opis lastnosti css in njihovih vrednosti, ki smo jih v tem primeru uporabili za centriranje diva znotraj diva:

• prikaz: inline-block – poravna element bloka v črto in zagotovi, da se ovije okoli drugega elementa;
• vertical-align: middle – poravna element na sredini glede na nadrejenega;
• margin-left – nastavi levi rob.

Kako narediti povezavo iz sloja

Naj se sliši čudno, to je mogoče. Včasih je lahko blok div kot povezava potreben pri postavljanju različnih vrst menijev. Oglejmo si praktičen primer implementacije povezovalnega sloja:

#layer1( širina: 500px; višina: 100px; ozadje: rgb(51,255,204); border:groove; ) a (prikaz: blok; poravnava besedila: sredina; višina: 100 %; barva: rgb(255,0,51) ; ) Povezava do naše spletne strani

V tem primeru z uporabo vrstičnega prikaza: blok nastavimo povezavo na vrednost elementa bloka. In tako, da celotna višina bloka div postane povezava, nastavite višino: 100 %. Skrivanje in prikaz blokovnih elementov

Bločni elementi ponujajo več možnosti za razširitev funkcionalnosti vmesnika kot zastarela tabelarična postavitev. Pogosto se zgodi, da je dizajn spletne strani unikaten in prepoznaven. Toda za tako ekskluzivo morate plačati s pomanjkanjem prostega prostora.

To še posebej velja za glavno stran, kjer so stroški oglaševanja najvišji. Zato se pojavi problem, kam »vtakniti« še eno reklamno pasico. In tukaj se ne morete izogniti poravnavi diva na sredino strani!

Bolj racionalna rešitev je, da se kakšen blok skrije. Tu je preprost primer takšne izvedbe:

#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( sloj1="noben"; ) document.getElementById("layer1").style.display=layer1 )

To je čarobni gumb. S klikom nanj se skrije ali prikaže skriti blok.

Centriranje elementov navpično z uporabo CSS je naloga, ki razvijalcem predstavlja nekaj težav. Vendar pa obstaja več načinov za rešitev, ki so precej preprosti. Ta lekcija predstavlja 6 možnosti za navpično centriranje vsebine.

Začnimo s splošnim opisom težave.

Težava z navpičnim centriranjem

Horizontalno centriranje je zelo preprosto in enostavno. Ko je sredinski element v vrstici, uporabimo lastnost poravnave glede na nadrejeni element. Ko je element na ravni bloka, nastavimo njegovo širino in samodejno nastavitev levega in desnega roba.

Večina ljudi se pri uporabi lastnosti text-align: sklicuje na lastnost vertical-align za navpično centriranje. Vse izgleda precej logično. Če ste uporabljali predloge tabel, ste verjetno v veliki meri uporabljali atribut valign, ki krepi prepričanje, da je navpična poravnava pravi način za rešitev težave.

Toda atribut valign deluje samo v celicah tabele. Lastnost navpične poravnave ji je zelo podobna. Vpliva tudi na celice tabele in nekatere elemente v vrstici.

Vrednost lastnosti vertical-align je relativna glede na nadrejeni element v vrstici.

• V vrstici besedila je poravnava relativna glede na višino vrstice.
• Celica tabele uporablja poravnavo glede na vrednost, izračunano s posebnim algoritmom (običajno višina vrstice).

Toda na žalost lastnost navpične poravnave ne deluje na elementih na ravni bloka (na primer odstavki znotraj elementa div). Ta situacija lahko vodi do misli, da ni rešitve za problem navpične poravnave.

Obstajajo pa tudi druge metode za centriranje blokovnih elementov, katerih izbira je odvisna od tega, kaj se centrira glede na zunanji vsebnik.

Metoda višine črte

Ta metoda deluje, ko želite eno vrstico besedila postaviti navpično na sredino. Vse kar morate storiti je, da višino vrstice nastavite tako, da je večja od velikosti pisave.

Prazen prostor bo privzeto enakomerno porazdeljen na vrhu in dnu besedila. In črta bo centrirana navpično. Pogosto je višina črte enaka višini elementa.

HTML:

Obvezno besedilo

CSS:

#child (line-height: 200px;)

Ta metoda deluje v vseh brskalnikih, vendar jo je mogoče uporabiti samo za eno vrstico. Vrednost 200 px v primeru je bila izbrana poljubno. Uporabite lahko katero koli vrednost, ki je večja od velikosti pisave besedila.

Centriranje slike z uporabo višine črte

Kaj pa, če je vsebina slika? Bo zgornja metoda delovala? Odgovor je še v eni vrstici kode CSS.

HTML:

CSS:

#parent (line-height: 200px;) #parent img (vertical-align: middle;)

Vrednost lastnosti line-height mora biti večja od višine slike.

Metoda tabele CSS

Zgoraj je bilo omenjeno, da se lastnost navpične poravnave uporablja za celice tabele, kjer deluje odlično. Naš element lahko prikažemo kot celico tabele in na njem uporabimo lastnost navpične poravnave za navpično centriranje vsebine.

Opomba: tabela CSS ni enaka tabeli HTML.

HTML:

Vsebina

CSS:

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

Izhod tabele nastavimo na nadrejeni element div in izpišemo ugnezdeni element div kot celico tabele. Zdaj lahko uporabite lastnost navpične poravnave na notranjem vsebniku. Vse v njem bo centrirano navpično.

Za razliko od zgornje metode je v tem primeru vsebina lahko dinamična, saj bo element div spreminjal velikost glede na svojo vsebino.

Pomanjkljivost te metode je, da ne deluje v starejših različicah IE. Za ugnezdeni vsebnik morate uporabiti lastnost display: inline-block.

Absolutna pozicija in negativne marže

Ta metoda deluje tudi v vseh brskalnikih. Zahteva pa, da se elementu, ki je centriran, dodeli višina.

Primer kode izvaja vodoravno in navpično centriranje hkrati:

HTML:

Vsebina

CSS:

#parent (položaj: relativno;) #child (položaj: absolutno; zgoraj: 50 %; levo: 50 %; višina: 30 %; širina: 50 %; rob: -15 % 0 0 -25 %; )

Najprej nastavimo vrsto pozicioniranja elementa. Nato nastavimo zgornji in levi lastnosti ugnezdenega elementa div na 50 %, kar ustreza sredini nadrejenega elementa. Toda sredina je zgornji levi kot ugnezdenega elementa. Zato ga morate dvigniti navzgor (polovica višine) in premakniti v levo (polovica širine), nato pa bo središče sovpadalo s središčem nadrejenega elementa. Zato je v tem primeru potrebno poznati višino elementa. Nato nastavimo element z negativnimi zgornjim in levim robom, enakim polovici višine oziroma širine.

Ta metoda ne deluje v vseh brskalnikih.

Absolutno pozicioniranje in raztezanje

Primer kode izvede navpično in vodoravno centriranje.

HTML:

Vsebina

CSS:

#parent (položaj: relativno;) #child (položaj: absolutno; zgoraj: 0; spodaj: 0; levo: 0; desno: 0; širina: 50 %; višina: 30 %; rob: samodejno; )

Ideja za to metodo je raztegniti ugnezdeni element na vse 4 meje nadrejenega elementa z nastavitvijo zgornjih, spodnjih, desnih in levih lastnosti na 0.

Nastavitev roba za samodejno ustvarjanje na vseh straneh bo nastavila enake vrednosti na vseh 4 straneh in naš ugnezdeni element div postavila na sredino njegovega nadrejenega elementa.

Na žalost ta metoda ne deluje v IE7 in starejših.

Enaki prostori zgoraj in spodaj

Pri tej metodi je enako oblazinjenje izrecno nastavljeno na vrhu in dnu nadrejenega elementa.

HTML:

Vsebina

CSS:

#parent (padding: 5% 0;) #child (padding: 10% 0;)

Primer kode CSS nastavi zgornje in spodnje oblazinjenje za oba elementa. Za ugnezdeni element bo nastavitev oblazinjenja služila za navpično centriranje. In oblazinjenje nadrejenega elementa bo središče ugnezdenega elementa znotraj njega.

Za dinamično spreminjanje velikosti elementov se uporabljajo relativne merske enote. In za absolutne merske enote boste morali narediti izračune.

Na primer, če ima nadrejeni element višino 400 slikovnih pik, ugnezdeni element pa 100 slikovnih pik, je potrebno 150 slikovnih pik odmika na vrhu in na dnu.

150 + 150 + 100 = 400

Uporaba % vam omogoča, da izračune prepustite brskalniku.

Ta metoda deluje povsod. Slaba stran je potreba po izračunih.

Opomba: Ta metoda deluje tako, da nastavi zunanje oblazinjenje elementa. Uporabite lahko tudi robove znotraj elementa. Odločitev o uporabi robov ali oblazinjenja je treba sprejeti glede na posebnosti projekta.

plavajoči div

Ta metoda uporablja prazen element div, ki lebdi in pomaga nadzorovati položaj našega ugnezdenega elementa v dokumentu. Upoštevajte, da je lebdeči div postavljen pred naš ugnezdeni element v kodi HTML.

HTML:

Vsebina

CSS:

#parent (height: 250px;) #floater (float: left; height: 50%; width: 100%; margin-bottom: -50px; ) #child (clear: both; height: 100px; )

Prazen element div zamaknemo v levo ali desno in mu nastavimo višino na 50 % nadrejenega elementa. Tako bo zapolnil zgornjo polovico nadrejenega elementa.

Ker je ta div lebdeč, je odstranjen iz običajnega toka dokumenta in moramo razviti besedilo na ugnezdenem elementu. Primer uporablja clear: both, vendar je povsem dovolj, da uporabite isto smer kot odmik lebdečega praznega elementa div.

Zgornja meja ugnezdenega elementa div je neposredno pod spodnjo mejo praznega elementa div. Ugnezdeni element moramo premakniti navzgor za polovico višine lebdečega praznega elementa. Težavo rešite tako, da uporabite negativno vrednost lastnosti margin-bottom za lebdeči prazen element div.

Ta metoda deluje tudi v vseh brskalnikih. Vendar pa njegova uporaba zahteva dodaten prazen element div in poznavanje višine ugnezdenega elementa.

Zaključek

Vse opisane metode so enostavne za uporabo. Težava je v tem, da nobeden od njih ni primeren za vse primere. Projekt morate analizirati in izbrati tistega, ki najbolj ustreza zahtevam.

Obstaja več bistveno različnih načinov za centriranje predmeta navpično z uporabo CSS, vendar je izbira pravega lahko težavna. Nekaj ​​si jih bomo ogledali in s pridobljenim znanjem izdelali tudi majhno spletno stran.

Navpične sredinske poravnave ni enostavno doseči s CSS. Obstaja veliko načinov in vsi ne delujejo v vseh brskalnikih. Oglejmo si 5 različnih metod ter prednosti in slabosti vsake. Primer.

1. metoda

Ta metoda predvideva, da nastavimo nek element za prikaz kot tabelo, nato pa lahko zanj uporabimo lastnost navpične poravnave (ki v različnih elementih deluje drugače).

Nekaj ​​koristnih informacij, ki jih je treba osredotočiti.

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

• Pros
• Vsebina lahko dinamično spreminja višino (višina ni definirana v CSS).

Vsebina se ne izreže, če zanjo ni dovolj prostora.

• Slabosti
• Ne deluje v IE 7 ali manj

Veliko ugnezdenih oznak

2. metoda

Ta metoda uporablja absolutno pozicioniranje diva, pri čemer je vrh nastavljen na 50 % in vrh roba minus polovica višine vsebine. To pomeni, da mora imeti objekt fiksno višino, ki je definirana v slogih CSS.

Ker je višina fiksna, lahko nastavite overflow:auto; za div, ki vsebuje vsebino, se torej, če vsebina ne ustreza, prikažejo drsni trakovi.

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

• Vsebina tukaj #vsebina ( položaj: absolutno; zgoraj: 50 %; višina: 240 slikovnih pik; zgornji rob: -120 slikovnih pik; /* minus polovica višine */ )
• Deluje v vseh brskalnikih.

Vsebina se ne izreže, če zanjo ni dovolj prostora.

• Ni nepotrebnega gnezdenja.

Ko ni dovolj prostora, vsebina izgine (na primer, div je znotraj telesa in je uporabnik pomanjšal okna, v tem primeru se drsni trakovi ne prikažejo.

3. metoda

Pri tej metodi bomo vsebinski div ovili z drugim divom. Nastavimo njegovo višino na 50 % (height: 50 %;), spodnji rob pa na polovico višine (margin-bottom:-contentheight;). Vsebina bo počistila lebdenje in bo na sredini.

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

• Vsebina tukaj #vsebina ( položaj: absolutno; zgoraj: 50 %; višina: 240 slikovnih pik; zgornji rob: -120 slikovnih pik; /* minus polovica višine */ )
• tukaj je vsebina #floater( float: levo; višina: 50%; margin-bottom: -120px; ) #content( jasno: oboje; višina: 240px; položaj: relativno; )

Vsebina se ne izreže, če zanjo ni dovolj prostora.

• Ko ni dovolj prostora (na primer, ko je okno pomanjšano), vsebina ni obrezana, se prikažejo drsni trakovi.

Lahko pomislim samo na eno stvar: da se uporablja dodaten prazen element.

4. metoda.

Ta metoda uporablja lastnost position:absolute; za div s fiksnimi dimenzijami (širina in višina). Nato nastavimo njegove koordinate top:0; spodaj:0; , a ker ima fiksno višino, se ne more raztegniti in je poravnan na sredino. To je zelo podobno dobro znani metodi vodoravnega centriranja elementa bloka s fiksno širino (margina: 0 auto;).

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

• Pomembne informacije.

Vsebina se ne izreže, če zanjo ni dovolj prostora.

• #content( položaj: absolutno; zgoraj: 0; dno: 0; levo: 0; desno: 0; rob: samodejno; višina: 240 slikovnih pik; širina: 70 %; )
• Zelo preprosto.

Ne deluje v Internet Explorerju

S to metodo lahko poravnate eno vrstico besedila na sredino. Enostavno nastavimo višino besedila (line-height) enako višini elementa (height). Po tem bo črta prikazana v sredini.

Nekaj ​​vrstic besedila #content(height: 100px; line-height: 100px; )

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

• Vsebina tukaj #vsebina ( položaj: absolutno; zgoraj: 50 %; višina: 240 slikovnih pik; zgornji rob: -120 slikovnih pik; /* minus polovica višine */ )
• Ne odreže besedila, če se ne prilega.

Vsebina se ne izreže, če zanjo ni dovolj prostora.

• Deluje samo z besedilom (ne deluje z elementi blokov).
• Če je besedilo več kot ena vrstica, je videti zelo slabo.

Ta metoda je zelo uporabna za majhne elemente, kot je centriranje besedila v gumbu ali besedilnem polju.

Zdaj veste, kako doseči navpično sredinsko poravnavo, naredimo preprosto spletno mesto, ki bo na koncu videti takole:

1. korak

Vedno je dobro začeti s pomensko oznako. Naša stran bo strukturirana na naslednji način:

• #floater (na sredino vsebine)
• #centred (osrednji element)
  • #stran
    • #logotip
    • #nav (seznam
    • #vsebina
  • #spodaj (za avtorske pravice in vse to)

  Napišimo naslednjo oznako html:

  Osredotočeno podjetje Podjetje

  • domov
  • Izdelki
  • Blog
  • Kontakt
  • O tem
  Naslov strani

  Holistično preoblikujte zunanje izvajanje z dodano vrednostjo po sodelovanju, osredotočenem na proces, in izmenjavi idej.

  Energijsko poenostavite vplivne tržne niše prek omogočenih imperativov. Celostno prevladujejo vrhunske inovacije po prepričljivih scenarijih. Brezhibno ponovno ujemite visoke standarde človeškega kapitala z vrhunskimi proizvedenimi izdelki. Izrazito združite sheme, skladne s standardi, pred robustnimi vortali. Edinstveno ponovite izkoriščeno spletno pripravljenost v primerjavi z informacijami, ki so že pripravljene.

  Naslov 2

  Učinkovito sprejmite prilagojeno spletno pripravljenost namesto procesov, ki jih usmerjajo stranke. Odločna rast imperativov med platformami v primerjavi s proaktivnimi tehnologijami. Priročno opolnomočite multidisciplinarne meta-storitve brez vmesnikov za celotno podjetje.

  Priročno poenostavite konkurenčna strateška tematska področja z osredotočenimi e-trgi. Fosfluorescentno združite skupnosti svetovnega razreda v primerjavi s trgi z dodano vrednostjo. Pred robustnimi e-storitvami ustrezno preoblikujte celostne storitve.

  Obvestilo o avtorskih pravicah je tukaj

  Html, telo ( rob: 0; oblazinjenje: 0; višina: 100 %; ) telo ( ozadje: url("page_bg.jpg") 50 % 50 % brez ponavljanja #FC3; družina pisav: Georgia, Times, serifi; ) #floater (položaj: relativno; lebdenje: levo; višina: 50 %; margin-bottom: -200px; širina: 1px; ) #centered (položaj: relativno; jasno: levo; višina: 400px; širina: 80 %; maks. -širina: 800 slikovnih pik; rob: 0 samodejno; obroba: polna #666; #dno (položaj: absolutno; desno: 0; ) ; bottom: 0; padding: 20px; #content: absolute; left: 0; bottom: 0; overflow: auto; padding: 20px;

  Preden poravnamo središče vsebine, moramo višino telesa in html nastaviti na 100 %. Ker se višina izračuna brez notranjega in zunanjega oblazinjenja (padding in margin), smo ju (padding) postavili na 0, da ni drsnih trakov.

  Spodnji rob za "lebdeči" element je enak minus polovici višine vsebine (400px), in sicer -200px;

  Vaša stran bi zdaj morala izgledati nekako takole:

  

  #centered element širina 80 %. Zaradi tega je naša stran na majhnih zaslonih ožja, na večjih pa širša. večina spletnih mest je na novih širokih zaslonih v zgornjem levem kotu videti nespodobno. Lastnosti min-width in max-width prav tako omejujejo našo stran, tako da ni videti preširoka ali preozka. Internet Explorer ne podpira teh lastnosti. Nastaviti ga morate na fiksno širino.

  Ker ima element #centered niz position:relative, lahko uporabimo absolutno pozicioniranje elementov v njem. Nato nastavite overflow:auto; za element #content, tako da se prikažejo drsni trakovi, če vsebina ne ustreza.

  3. korak

  Zadnja stvar, ki jo bomo naredili, je, da dodamo nekaj sloga, da bo stran videti nekoliko privlačnejša. Začnimo z jedilnikom.

  #nav ul ( slog seznama: brez; oblazinjenje: 0; rob: 20px 0 0 0; zamik besedila: 0; ) #nav li ( oblazinjenje: 0; rob: 3px; ) #nav li a ( prikaz: blok; barva ozadja: #e8e8e8; margina: 1px solid: ""; teža pisave: float: right; margin: 0 2px 0 5px; f8f8f8; border-bottom color : #777;) #nav li a:hover::after ( rob: 0 0 0 7px; barva: #f93; ) #nav li a:active (padding: 8px 7px 7px; )

  Prva stvar, ki smo jo naredili za boljši videz menija, je bila odstranitev oznak z nastavitvijo atributa list-style:none ter nastavitev oblazinjenja in oblazinjenja, saj se v različnih brskalnikih privzeto zelo razlikujejo.

  Upoštevajte, da smo nato določili, da morajo biti povezave upodobljene kot blokovni elementi. Zdaj, ko so prikazani, so raztegnjeni po celotni širini elementa, v katerem se nahajajo.

  Druga zanimiva stvar, ki smo jo uporabili za meni, sta psevdorazreda:before in:after. Omogočajo vam, da dodate nekaj pred in za elementom. To je dober način za dodajanje ikon ali simbolov, kot je puščica na koncu vsake povezave. Ta trik ne deluje v Internet Explorerju 7 in starejših.

  

  4. korak

  In ne nazadnje, našemu dizajnu bomo dodali nekaj vijakov za še več lepote.

  #centered (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (družina pisav: Helvetica, Arial, sans- serif; debelina pisave: #666; h1 (barva: #f93; obroba: poln #ddd; razmik med črkami: -0,05em; debelina pisave: krepko; rob na vrhu: 0; padding-top: 0; ) #bottom (padding: 10px; font-size: 0.7em; color: #f03; ) #logo (font-size: 2em; text-align: center; color: #999; ) #logo močno (teža pisave: normalno;) #logo span (zaslon: blok; velikost pisave: 4em; višina vrstice: 0,7em; barva: #666;) p, h2, h3 (višina vrstice: 1,6em;) a (barva: #f03; )

  V teh slogih nastavimo zaobljene vogale za element #centered. V CSS3 bo to naredila lastnost border-radius. To še ni implementirano v nekaterih brskalnikih, razen pri uporabi predpon -moz in -webkit za Mozilla Firefox in Safari/Webkit.

  

  Združljivost

  Kot ste verjetno že uganili, je glavni vir težav z združljivostjo Internet Explorer:

  • Element #floater mora imeti nastavljeno širino
  • IE 6 ima dodatno oblazinjenje okoli menijev

  237152 ogledov