Zarovnajte stránku na stred css. Horizontálne a vertikálne zarovnanie prvkov v CSS

Ahoj! Pokračujeme v ovládaní základov jazyka HTML. Pozrime sa, čo potrebujete napísať, aby ste zarovnali text na stred, šírku alebo okraje.

Keď sa pustíme do práce, pozrime sa, ako vycentrovať text v HTML tromi rôznymi spôsobmi. Posledné dve sú prepojené priamo so štýlom. Môže to byť CSS súbor, ktorý sa pripája k stránkam webu a definuje ich vzhľad.

Metóda 1 - priama práca s HTML

Je to vlastne celkom jednoduché. Pozrite si príklad nižšie.

Zarovnajte odsek na stred.

Ak potrebujete presunúť fragmenty textu iným spôsobom, namiesto parametra „centrum“ zadajte nasledujúce hodnoty:

• zarovnať – zarovnanie textu na šírku strany;
• vpravo – na pravom okraji;
• doľava - doľava.

Analogicky môžete presunúť obsah, ktorý je v hlavičkách (h1, h2) a kontajneri (div).

Metóda 2 a 3 - pomocou štýlov

Vyššie uvedený dizajn sa môže mierne zmeniť. Účinok bude rovnaký. Ak to chcete urobiť, musíte napísať kód nižšie.

Textový blok.

V tejto forme sa kód zapíše priamo do HTML, aby sa vycentroval textový obsah.

Existuje ďalší alternatívny spôsob, ako dosiahnuť výsledky. Budete musieť urobiť niekoľko krokov.

Krok 1. V hlavnom kóde napíšte

Textový materiál.

Krok 2. V priloženom súbore CSS zadajte nasledujúci kód:

Rovno (zarovnanie textu:na stred;)

Podotýkam, že slovo „rovno“ je len názov triedy, ktorá sa dá nazvať inak. Toto je ponechané na uváženie programátora.

Analogicky v HTML môžete text jednoducho vycentrovať, zarovnať a zarovnať k pravému alebo ľavému okraju stránky. Ako vidíte, existuje oveľa viac ako jedna možnosť, ako dosiahnuť svoj cieľ.

Len pár otázok:

• Robíte informačný neziskový projekt?
• Chcete, aby sa vaša stránka dobre umiestnila vo vyhľadávačoch?
• Chcete zarábať online?

Ak sú všetky odpovede kladné, pozrite sa na integrovaný prístup k vývoju webových stránok. Informácie budú užitočné najmä vtedy, ak beží na redakčnom systéme WordPress.

Upozorňujem, že vlastné webové stránky sú len jednou z mnohých možností, ako si na internete generovať pasívny alebo aktívny príjem. Môj blog je venovaný finančným príležitostiam online.

Pracovali ste niekedy v oblasti dopravnej arbitráže, copywritingu alebo iných oblastiach činnosti, ktoré generujú primárny alebo dodatočný príjem prostredníctvom spolupráce na diaľku? O tom a ešte oveľa viac sa môžete dozvedieť práve teraz na stránkach môjho blogu.

V budúcnosti zverejním veľa skutočne užitočných informácií. Zostať v kontakte. Ak chcete, môžete sa prihlásiť na odber aktualizácií Workip e-mailom. Formulár predplatného sa nachádza nižšie.

Ak sa zaseknete do akejkoľvek webovej stránky vytvorenej na základe html, uvidíte určitú vrstvenú štruktúru. Okrem toho bude jeho vzhľad podobný vrstvenému koláču. Ak si to myslíte, s najväčšou pravdepodobnosťou ste už dlho nejedli. Najprv teda uspokojte svoj hlad a potom vám povieme, ako vycentrovať vrstvu div na vašom webe:

Výhody rozloženia pomocou tagu

Existujú dva hlavné typy štruktúry webových stránok:

• tabuľkový;
• Blokovať.

Tabuľkové usporiadanie bolo dominantné aj na úsvite internetu. Medzi jeho výhody patrí presnosť určeného polohovania. Má však zjavné nedostatky. Tými hlavnými sú dĺžka kódu a nízka rýchlosť načítania.

Pri použití rozloženia tabuľky sa webová stránka nezobrazí, kým sa úplne nenačíta. Pri použití blokov div sa prvky zobrazia okamžite.

Okrem vysokej rýchlosti načítania umožňuje bloková konštrukcia webovej stránky niekoľkonásobne znížiť množstvo html kódu. Vrátane použitia tried CSS.

Na štruktúrovanie zobrazenia údajov na stránke by sa však malo použiť tabuľkové usporiadanie. Klasickým príkladom jeho použitia je zobrazovanie tabuliek.

Konštrukcia blokov založená na značkách sa tiež nazýva vrstva po vrstve a samotné bloky sa nazývajú vrstvy. Je to preto, že keď sa použijú určité hodnoty vlastností, môžu byť naskladané na seba, podobne ako vrstvy vo Photoshope.

Polohovacie pomôcky

V blokovom rozložení je lepšie umiestniť vrstvy pomocou kaskádových štýlov. Hlavná vlastnosť CSS zodpovedná za rozloženie je float.
Syntax vlastníctva:
plavák: vľavo | vpravo | žiadne | dediť
Kde:

• doľava – zarovná prvok k ľavému okraju obrazovky. Tok okolo zostávajúcich prvkov sa vyskytuje vpravo;
• vpravo – zarovnanie vpravo, obtekanie ostatných prvkov – vľavo;
• žiadne – balenie nie je povolené;
• zdediť – zdedí hodnotu nadradeného prvku.

Pozrime sa na jednoduchý príklad umiestnenia divov pomocou tejto vlastnosti:

#left ( šírka: 200px; výška: 100px; float: left; background: rgb(255,51,102); ) #right (šírka: 200px; výška: 100px; float: right; background: rgb(0,255,153); ) Ľavý blok Pravý blok

Teraz sa pokúsime použiť rovnakú vlastnosť na umiestnenie tretieho prvku div do stredu stránky. Ale bohužiaľ float nemá stredovú hodnotu. A keď dáte novému bloku hodnotu zarovnania doprava alebo doľava, posunie sa v zadanom smere. Zostáva teda už len nastaviť float: doľava na všetky tri bloky:

Ale ani toto nie je najlepšia možnosť. Pri zmenšení okna sa všetky vrstvy zvislo zoradia do jedného radu a pri zväčšení sa prilepia na ľavý okraj okna. Potrebujeme teda lepší spôsob, ako vycentrovať div.

Centrovacie vrstvy

V ďalšom príklade použijeme kontajnerovú vrstvu, do ktorej umiestnime zvyšné prvky. Toto rieši problém vzájomného pohybu blokov pri zmene veľkosti okna. Vycentrovanie kontajnera v strede sa vykoná nastavením vlastností okraja na nulu pre okraje od horného okraja a auto po stranách (margin: 0 auto ):

#container ( šírka: 600px; margin: 0 auto; ) #left (šírka: 200px; výška: 100px; float: left; background: rgb(255,51,102); ) #right (šírka: 200px; výška: 100px; float : left; background: rgb(0,255,153); ) #center (šírka: 200px; výška: 100px; float: left; background: rgb(255,0,0); ) Ľavý blok Centrálny blok Pravý blok

Rovnaký príklad ukazuje, ako môžete prvok div vycentrovať vodorovne. A ak mierne upravíte vyššie uvedený kód, môžete dosiahnuť vertikálne zarovnanie blokov. Aby ste to dosiahli, stačí zmeniť dĺžku vrstvy kontajnera (zmenšiť ju). To znamená, že po úprave by mala trieda css vyzerať takto:

Po zmene sa všetky bloky zoradia presne do radu v strede. A ich poloha sa nezmení bez ohľadu na veľkosť okna prehliadača. Takto vyzerá vertikálne centrovanie prvku div:

V nasledujúcom príklade sme použili niekoľko nových vlastností css na vycentrovanie vrstiev v kontajneri:

#container ( width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; ) #left ( width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; ) #right ( width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; )

Krátky popis vlastností css a ich hodnôt, ktoré sme v tomto príklade použili na vycentrovanie prvku div v prvku div:

• display: inline-block – zarovná prvok bloku do riadku a zabezpečí, aby sa obalil okolo iného prvku;
• vertikálne zarovnať: stred – zarovná prvok na stred vzhľadom k rodičovi;
• margin-left – nastaví ľavý okraj.

Ako vytvoriť odkaz z vrstvy

Aj keď to môže znieť zvláštne, je to možné. Niekedy môže byť pri zostavovaní rôznych typov ponúk potrebný blok div ako odkaz. Pozrime sa na praktický príklad implementácie linkovej vrstvy:

#layer1( šírka: 500px; výška: 100px; pozadie: rgb(51,255,204); border:groove; ) a ( display: block; text-align: center; height: 100%; color: rgb(255,0,51) ;) Odkaz na náš web

V tomto príklade pomocou riadkového zobrazenia: blok nastavíme odkaz na hodnotu prvku bloku. A aby sa celá výška bloku div stala odkazom, nastavte výšku: 100%.

Skrytie a zobrazenie prvkov bloku

Blokové prvky poskytujú viac príležitostí na rozšírenie funkčnosti rozhrania ako zastarané tabuľkové usporiadanie. Často sa stáva, že dizajn webovej stránky je jedinečný a rozpoznateľný. Ale za takú exkluzivitu musíte zaplatiť nedostatkom voľného miesta.

Platí to najmä pre hlavnú stránku, na ktorej sú náklady na inzerciu najvyššie. Preto vzniká problém, kam „strčiť“ ďalší reklamný banner. A tu sa nemôžete vyhnúť zarovnaniu prvku div do stredu stránky!

Racionálnejším riešením je urobiť nejaký blok skrytý. Tu je jednoduchý príklad takejto implementácie:

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

Toto je magické tlačidlo. Kliknutím naň skryjete alebo zobrazíte skrytý blok.

V tomto príklade sa umiestnenie blokov div žiadnym spôsobom nemení. Používa jednoduchú funkciu JavaScript, ktorá po kliknutí na tlačidlo zmení hodnotu vlastnosti zobrazenia css (udalosť onclick).

syntax zobrazenia:
displej: blok | inline | inline-blok | riadková tabuľka | položka zoznamu | žiadne | zabehnutý | stôl | popis tabuľky | stolová bunka | tabuľka-stĺpec-skupina | stĺpec tabuľky | table-footer-group | table-header-group | riadok stola | tabuľka-riadok-skupina

Ako vidíte, táto vlastnosť môže nadobudnúť mnoho hodnôt. Preto je veľmi užitočný a možno ho použiť na umiestnenie prvkov. V jednom z predchádzajúcich príkladov sme použili jednu z jeho hodnôt (inline-block) na vycentrovanie prvku div v rámci prvku div.

Na skrytie a zobrazenie vrstvy sme použili dve hodnoty pre vlastnosť display.

Veľmi často v rozložení je potrebné vycentrovať nejaký prvok horizontálne a/alebo vertikálne. Preto som sa rozhodla spraviť článok s rôznymi spôsobmi centrovania, aby bolo všetko po ruke na jednom mieste.

Okraj horizontálneho zarovnania: auto

Horizontálne zarovnanie pomocou okraja sa používa, keď je známa šírka centrovaného prvku. Funguje pre blokové prvky:

Prvok ( ľavý okraj: automaticky; pravý okraj: automaticky; šírka: 50 %; )

Zadaním automatického pre pravý a ľavý okraj budú rovnaké, čím sa prvok vycentruje horizontálne v rámci rodičovského bloku.

zarovnanie textu: na stred

Táto metóda je vhodná na centrovanie textu v rámci bloku. zarovnanie textu: na stred:

Zarovnanie pomocou zarovnania textu .wrapper ( zarovnanie textu: na stred; )

Som zarovnaný na stred

pozíciu a ľavú zápornú maržu

Vhodné pre centrovacie bloky známej šírky. Dáme pozíciu nadradeného bloku: relatívne k pozícii vzhľadom k nemu, centrovanú pozíciu prvku: absolútnu , vľavo: 50 % a záporný okraj vľavo, ktorého hodnota sa rovná polovici šírky prvku:

Zarovnanie s pozíciou .wrapper (pozícia: relatívna; ) .wrapper p (vľavo: 50%; okraj: 0 0 0 -100px; pozícia: absolútna; šírka: 200px; )

Som zarovnaný na stred

zobrazenie: inline-block + text-align: center

Metóda je vhodná na zarovnanie blokov neznámej šírky, vyžaduje si však rodiča obalu. Horizontálnu ponuku môžete vycentrovať napríklad takto:

Zarovnanie s displejom: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

• Domov
• o autorovi

Vertikálne zarovnanie - výška čiary

Ak chcete zarovnať jeden riadok textu, môžete použiť rovnaké hodnoty výšky a riadkov pre nadradený blok. Vhodné pre tlačidlá, položky ponuky atď.

line-height .wrapper ( výška: 100px; line-height: 100px; )

Som vertikálne zarovnaný

pozíciu a zápornú maržu nahor

Prvok je možné zarovnať vertikálne tak, že mu dáte pevnú výšku a použijete polohu: absolútny a záporný okraj rovný polovici výšky zarovnávaného prvku. Rodičovský blok musí mať pozíciu: relatívna:

Wrapper ( pozícia: relatívna; ) prvok ( výška: 200 pixelov; okraj: -100 pixelov 0 0; pozícia: absolútna; hore: 50 %; )

Týmto spôsobom môžete pomocou polohovania a záporných okrajov vycentrovať prvok na stránke.

displej: tabuľka-bunka

Pri zvislom zarovnaní sa na prvok aplikuje vlastnosť display: table-cell, ktorá ho núti emulovať bunku tabuľky. Nastavíme aj jeho výšku a vertical-align: middle . Zabaľme to všetko do kontajnera s dislpay: table; property. :

Vertikálne zarovnanie zobrazenie: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )

Som vertikálne zarovnaný

Dynamické zarovnanie prvku na stránke

Pozreli sme sa na spôsoby, ako zarovnať prvky na stránke pomocou CSS. Teraz sa pozrime na implementáciu jQuery.

Pripojme jQuery k stránke:

Navrhujem napísať jednoduchú funkciu na vycentrovanie prvku na stránke, nazvime ju alignCenter() . Samotný prvok funguje ako argument funkcie:

Funkcia alignCenter(elem) ( // kód tu )

V tele funkcie dynamicky vypočítame a priradíme súradnice stredu stránky vlastnostiam CSS left a top:

Funkcia alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - el. height()) / 2 + "px" // nezabudnite k prvku pridať position: absolute, aby sa spustili súradnice )) )

V prvom riadku funkcie dostaneme šírku dokumentu a odpočítame od nej šírku prvku, rozdeleného na polovicu - to bude horizontálny stred stránky. Druhý riadok robí to isté, len s výškou pre vertikálne zarovnanie.

Funkcia je pripravená, zostáva ju len pripojiť k udalostiam pripravenosti DOM a zmene veľkosti okna:

$(function() ( // volanie funkcie centrovania, keď je DOM pripravený alignCenter($(elem)); // volanie funkcie pri zmene veľkosti okna $(window).resize(function() ( alignCenter($(elem) )); )) // funkcia centrovania prvku alignCenter(elem) ( elem.css(( // výpočet ľavých a horných súradníc vľavo: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Aplikácia Flexboxu

Nové funkcie CSS3, ako napríklad Flexbox, sa postupne stávajú samozrejmosťou. Táto technológia pomáha vytvárať značky bez použitia plavákov, polohovania atď. Dá sa použiť aj na vycentrovanie prvkov. Napríklad aplikujte Flexbox na nadradený element.wrapper a vycentrujte obsah vnútri:

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; výška: 500px; šírka: 500px; ) .wrapper .content ( okraj: auto; /* okraj: 0 automatický; iba horizontálny */ /* okraj: automatický 0; iba zvislý */ ) Lorem ipsum dolor sit amet

Toto pravidlo vycentruje prvok horizontálne a zároveň vertikálne - okraj teraz funguje nielen pre horizontálne zarovnanie, ale aj pre vertikálne. A bez známej šírky/výšky.

Súvisiace zdroje Pomôžte projektu

V CSS sa niektoré zdanlivo jednoduché veci nerobia tak ľahko. Jednou z týchto vecí je zarovnanie, t.j. keď je potrebné umiestniť jeden prvok určitým spôsobom vzhľadom na druhý.

Tento článok predstavuje niekoľko hotových riešení, ktoré pomôžu zjednodušiť prácu centrovacích prvkov horizontálne a / alebo vertikálne.

Poznámka: Pod každým riešením je zoznam prehliadačov s uvedením verzií, v ktorých funguje špecifikovaný kód CSS.

CSS – Center Align Block

1. Zarovnanie jedného bloku na stred druhého bloku. V tomto prípade majú prvý a druhý blok dynamické veľkosti.

... ...

Rodič ( pozícia: relatívna; ) .child ( pozícia: absolútna; vľavo: 50 %; hore: 50 %; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) ;)

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

2. Zarovnanie jedného bloku na stred druhého. V tomto prípade má druhý blok pevné rozmery.

Rodič ( pozícia: relatívna; ) .child ( pozícia: absolútna; vľavo: 50 %; hore: 50 %; /* šírka a výška 2 blokov */ šírka: 500px; výška: 250px; /* Hodnoty sa určujú v závislosti na jeho veľkosti */ /* ľavý okraj = - šírka / 2 */ ľavý okraj: -250 pixelov; /* horný okraj = - výška / 2 */ horný okraj: -125 pixelov; )

Prehliadače, ktoré podporujú toto riešenie:

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

3. Zarovnanie jedného bloku na stred druhého bloku. V tomto prípade má druhý blok rozmery špecifikované v percentách.

Rodič ( pozícia: relatívna; ) .child ( pozícia: absolútna; /* šírka a výška 2 blokov v % */ výška: 50 %; šírka: 50 %; /* Hodnoty sú určené v závislosti od jej veľkosti v % * / vľavo: 25 %; /* (100 % - šírka) / 2 */ hore: 25 %; /* (100 % - výška) / 2 */ )

Prehliadače, ktoré podporujú toto riešenie:

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

CSS - Horizontálne zarovnanie

1. Horizontálne zarovnanie jedného prvku bloku (zobrazenie: blok) voči druhému (v ktorom sa nachádza):

... ...

Blokovať ( ľavý okraj: auto; pravý okraj: auto; )

Prehliadače, ktoré podporujú toto riešenie:

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

2. Horizontálne zarovnanie riadkového (zobrazenie: inline) alebo riadkového bloku (zobrazenie: inline-block):

... ...

Parent ( text-align: center; ) .child ( display: inline-block; )

Prehliadače, ktoré podporujú toto riešenie:

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

CSS - Vertical Alignment

1. Vycentrujte jeden prvok (zobrazenie: inline, display: inline-block) vzhľadom na druhý (v ktorom sa nachádza) v strede. Rodičovský blok v tomto príklade má pevnú výšku, ktorá sa nastavuje pomocou vlastnosti CSS line-height.

... ...

Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )

Prehliadače, ktoré podporujú toto riešenie:

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

2. Vertikálne vycentrovanie jedného bloku voči druhému reprezentovaním rodiča ako tabuľky a potomka ako bunky tejto tabuľky.

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

Prehliadače, ktoré podporujú toto riešenie:

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

Ak poznáte nejaké ďalšie zaujímavé triky alebo užitočné hotové riešenia zarovnania, podeľte sa o ne v komentároch.

Vertikálne centrovanie prvkov pomocou CSS je úloha, ktorá predstavuje pre vývojárov určité ťažkosti. Na jeho vyriešenie však existuje niekoľko metód, ktoré sú celkom jednoduché. Táto lekcia predstavuje 6 možností vertikálneho centrovania obsahu.

Začnime všeobecným popisom problému.

Problém vertikálneho centrovania

Horizontálne centrovanie je veľmi jednoduché a ľahké. Keď je vycentrovaný prvok vložený, použijeme vlastnosť zarovnania vzhľadom na nadradený prvok. Keď je prvok na úrovni bloku, nastavíme jeho šírku a automatické nastavenie ľavého a pravého okraja.

Väčšina ľudí, keď používa vlastnosť text-align:, odkazuje na vlastnosť vertical-align pre vertikálne centrovanie. Všetko vyzerá celkom logicky. Ak ste používali šablóny tabuliek, pravdepodobne ste hojne využívali atribút valign, ktorý posilňuje presvedčenie, že vertikálne zarovnanie je ten správny spôsob riešenia problému.

Ale atribút valign funguje iba na bunkách tabuľky. A vlastnosť vertical-align je jej veľmi podobná. Ovplyvňuje aj bunky tabuľky a niektoré vložené prvky.

Hodnota vlastnosti vertical-align je relatívna k rodičovskému inline prvku.

• V riadku textu je zarovnanie relatívne k výške riadku.
• Bunka tabuľky používa zarovnanie vzhľadom na hodnotu vypočítanú špeciálnym algoritmom (zvyčajne výška riadku).

Ale bohužiaľ, vlastnosť vertical-align nefunguje na prvkoch na úrovni bloku (napríklad odseky vo vnútri prvku div). Táto situácia môže viesť k myšlienke, že problém vertikálneho vyrovnania neexistuje.

Existujú však aj iné spôsoby centrovania blokových prvkov, ktorých výber závisí od toho, čo sa centruje vo vzťahu k vonkajšiemu kontajneru.

Metóda výšky čiary

Táto metóda funguje, keď chcete vertikálne vycentrovať jeden riadok textu. Jediné, čo musíte urobiť, je nastaviť výšku riadku tak, aby bola väčšia ako veľkosť písma.

V predvolenom nastavení bude biely priestor rozmiestnený rovnomerne v hornej a dolnej časti textu. A čiara bude vertikálne vycentrovaná. Často sa výška riadku rovná výške prvku.

HTML:

Požadovaný text

CSS:

#child ( výška riadku: 200px; )

Táto metóda funguje vo všetkých prehliadačoch, aj keď ju možno použiť iba pre jeden riadok. Hodnota 200 px v príklade bola zvolená ľubovoľne. Môžete použiť akúkoľvek hodnotu väčšiu ako je veľkosť písma textu.

Vycentrovanie obrázka pomocou Line-Height

Čo ak je obsahom obrázok? Bude vyššie uvedená metóda fungovať? Odpoveď spočíva v ďalšom riadku kódu CSS.

HTML:

CSS:

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

Hodnota vlastnosti line-height musí byť väčšia ako výška obrázka.

Metóda tabuľky CSS

Vyššie bolo spomenuté, že vlastnosť vertical-align sa používa pre bunky tabuľky, kde funguje výborne. Náš prvok môžeme zobraziť ako bunku tabuľky a použiť na nej vlastnosť vertical-align na vertikálne vycentrovanie obsahu.

Poznámka: Tabuľka CSS nie je to isté ako tabuľka HTML.

HTML:

Obsah

CSS:

#parent (zobrazenie: tabuľka;) #podriadené (zobrazenie: bunka tabuľky; zvislé zarovnanie: stred; )

Výstup tabuľky nastavíme na nadradený prvok div a vydáme vnorený prvok div ako bunku tabuľky. Teraz môžete použiť vlastnosť vertikálneho zarovnania na vnútornom kontajneri. Všetko v ňom bude vertikálne vycentrované.

Na rozdiel od vyššie uvedenej metódy môže byť v tomto prípade obsah dynamický, pretože prvok div zmení veľkosť podľa svojho obsahu.

Nevýhodou tejto metódy je, že nefunguje v starších verziách IE. Pre vnorený kontajner musíte použiť vlastnosť display: inline-block.

Absolútne umiestnenie a záporné marže

Táto metóda funguje aj vo všetkých prehliadačoch. Vyžaduje si to však, aby centrovanému prvku bola pridelená výška.

Príklad kódu vykonáva horizontálne a vertikálne centrovanie súčasne:

HTML:

Obsah

CSS:

#rodič (pozícia: relatívna;) #dieťa ( pozícia: absolútna; hore: 50 %; vľavo: 50 %; výška: 30 %; šírka: 50 %; okraj: -15 % 0 0 -25 %; )

Najprv nastavíme typ umiestnenia prvku. Ďalej nastavíme vlastnosti top a left vnoreného prvku div na 50 %, čo zodpovedá stredu nadradeného prvku. Stred je však ľavý horný roh vnoreného prvku. Preto ho musíte zdvihnúť (polovica výšky) a posunúť doľava (polovica šírky) a potom sa stred zhoduje so stredom nadradeného prvku. Takže poznať výšku prvku v tomto prípade je nevyhnutné. Potom nastavíme prvok so záporným horným a ľavým okrajom rovným polovici výšky a šírky.

Táto metóda nefunguje vo všetkých prehliadačoch.

Absolútne polohovanie a strečing

Príklad kódu vykonáva vertikálne a horizontálne centrovanie.

HTML:

Obsah

CSS:

#rodič (pozícia: relatívna;) #dieťa ( pozícia: absolútna; hore: 0; dole: 0; vľavo: 0; vpravo: 0; šírka: 50 %; výška: 30 %; okraj: auto; )

Myšlienkou tejto metódy je roztiahnuť vnorený prvok na všetky 4 hranice nadradeného prvku nastavením vlastností top, bottom, right a left na 0.

Nastavením okrajov na automatické generovanie na všetkých stranách sa nastavia rovnaké hodnoty na všetkých 4 stranách a náš vnorený prvok div sa vycentruje na jeho nadradený prvok.

Bohužiaľ, táto metóda nefunguje v IE7 a nižšie.

Rovnaké priestory nad a pod

V tejto metóde je rovná výplň explicitne nastavená nad a pod nadradeným prvkom.

HTML:

Obsah

CSS:

#rodič (výplň: 5 % 0; ) #dieťa ( výplň: 10 % 0; )

Príklad kódu CSS nastavuje hornú a spodnú výplň pre oba prvky. Pre vnorený prvok bude nastavenie výplne slúžiť na jeho vertikálne vycentrovanie. A výplň nadradeného prvku vycentruje vnorený prvok v ňom.

Na dynamickú zmenu veľkosti prvkov sa používajú relatívne jednotky merania. A pre absolútne jednotky merania budete musieť urobiť výpočty.

Napríklad, ak má nadradený prvok výšku 400 pixelov a vnorený prvok má 100 pixelov, potom je potrebná 150 pixelová výplň v hornej a dolnej časti.

150 + 150 + 100 = 400

Použitie % vám umožňuje ponechať výpočty na prehliadači.

Táto metóda funguje všade. Nevýhodou je nutnosť výpočtov.

Poznámka: Táto metóda funguje nastavením vonkajšej výplne prvku. Okraje môžete použiť aj v rámci prvku. Rozhodnutie o použití okrajov alebo výplne sa musí urobiť v závislosti od špecifík projektu.

plávajúca div

Táto metóda používa prázdny prvok div, ktorý sa vznáša a pomáha kontrolovať polohu nášho vnoreného prvku v dokumente. Všimnite si, že plávajúci prvok div je umiestnený pred naším vnoreným prvkom v kóde HTML.

HTML:

Obsah

CSS:

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

Prázdny prvok div odsadíme doľava alebo doprava a nastavíme jeho výšku na 50 % nadradeného prvku. Týmto spôsobom vyplní hornú polovicu nadradeného prvku.

Keďže tento prvok div je plávajúci, je odstránený z normálneho toku dokumentu a musíme rozbaliť text na vnorenom prvku. V príklade je použité clear: both , ale úplne stačí použiť rovnaký smer ako odsadenie plávajúceho prázdneho prvku div.

Horný okraj vnoreného prvku div je priamo pod spodným okrajom prázdneho prvku div. Musíme posunúť vnorený prvok nahor o polovicu výšky plávajúceho prázdneho prvku. Na vyriešenie problému použite zápornú hodnotu vlastnosti margin-bottom pre plávajúci prázdny prvok div.

Táto metóda funguje aj vo všetkých prehliadačoch. Jeho použitie však vyžaduje ďalší prázdny prvok div a znalosť výšky vnoreného prvku.

Záver

Všetky opísané metódy sa ľahko používajú. Problém je v tom, že žiadny z nich nie je vhodný pre všetky prípady. Musíte analyzovať projekt a vybrať ten, ktorý najlepšie vyhovuje požiadavkám.