Každý, kto sa podieľa na rozložení, skôr či neskôr čelí potrebe zarovnať prvky vertikálne... a vie, aké ťažkosti môžu nastať pri zarovnávaní prvku na stred. CSS má vlastnosť `vertical-align` s viacerými hodnotami, čo by logicky malo fungovať vertikálne zarovnanie. V praxi to však nefunguje podľa predstáv.

Na vyriešenie tohto problému existuje niekoľko techník. Pozrime sa bližšie na každý z nich nižšie.

1. Zarovnanie s tabuľkou

V tomto prípade nahrádzame vonkajší blok jednobunkovou tabuľkou. Zarovnanie sa použije na obsah bunky, teda na vnútorný blok.

HTML

css

Vonkajšie ( šírka : 200 px ; výška : 200 px ; zarovnanie textu : stred ; zvislé zarovnanie : stred ; farba pozadia : #ffc ; )

Hlavná nevýhoda toto rozhodnutie, z hľadiska sémantiky - použitie tabuľky nie je na zamýšľaný účel. Druhou nevýhodou je, že na vytvorenie tabuľky je potrebné pridať ešte jeden prvok okolo vonkajšia jednotka.

Prvé negatívum možno čiastočne vrátiť späť nahradením značiek tabuľky za divs a nastavením režimu zobrazenia tabuľky v CSS.

HTML

css

Vonkajší obal ( displej : tabuľka ; ) . vonkajší ( displej : bunka tabuľky ; )

2. Zarovnanie s výplňou

Za predpokladu, že poznáme výšky vnútorných a vonkajších blokov, zarovnanie je možné nastaviť pomocou zvislých zarážok vnútorného bloku podľa vzorca: (H vonkajšie - H vnútorné) / 2.

css

Vonkajšie (výška: 200px;) .vnútorné (výška: 100px; okraj: 50px 0;)

Mínusom riešenia je povinná znalosť výšky oboch blokov.

3. Zarovnanie s výškou čiary

Ak vnútorný blok nezaberá viac ako jeden riadok textu, môžete použiť vlastnosť line-height a nastaviť ju na rovnakú výšku ako výška vonkajšieho bloku. Keďže obsah vnútorného bloku by nemal ísť do druhého riadku, je dobré pridať aj medzery: nowrap a overflow: skryté pravidlá.

css

Vonkajšie ( výška : 200px ; výška riadku : 200 px ; ) .vnútorné ( white-space : nowrap ; overflow : hidden ; )

Túto metódu možno použiť aj na zarovnanie viacriadkový text. Aby to bolo možné, vnútorný blok musí prepísať hodnotu výšky riadku a pridať pravidlá display: inline-block a vertical-align: middle .

css

Vonkajšie ( výška : 200 px ; výška riadku : 200 px ; ) .vnútorné ( výška riadku : normálna ; zobrazenie : vložený blok ; zvislé zarovnanie : na stred ; )

Nevýhodou tejto metódy je, že musí byť známa výška vonkajšieho bloku.

4. Zarovnanie s „roztiahnutím“

Túto metódu je možné použiť, keď nám je známa výška vnútorného bloku, ale nie vonkajšieho.

Uplatňovať túto metódu Potrebujeme:

• Nastavte vonkajší blok na pozíciu: relatívna a vnútorný blok na absolútnu polohu: absolútnu ;
• Pridajte k vnútornému bloku nejaké pravidlá top: 0 a bottom: 0, v dôsledku čoho sa roztiahne na celú výšku vonkajšieho bloku;
• Nastavte vertikálnu výplň vnútorného bloku na auto .

css

Vonkajšia (pozícia: relatívna;) .vnútorná (výška: 100px; poloha: absolútna; horná: 0; spodná: 0; okraj: auto 0;)

5. Zarovnanie so záporným okrajom-vrchol

Podobne ako v predchádzajúcej, táto metóda sa používa, keď nie je známa výška vonkajšieho bloku, ale je známa výška vnútorného.

Vonkajší blok musíte nastaviť na relatívne umiestnenie a vnútorný blok na absolútne umiestnenie. Potom posuňte vnútornú škatuľu nadol o polovicu výšky hornej časti vonkajšej škatule: 50 % a posuňte ju nahor o polovicu jej vlastného okraja výšky: -H _vnútorné / 2 .

css

Vonkajšia (pozícia: relatívna; ) .vnútorná (výška: 100 pixelov; pozícia: absolútna; horná časť: 50 %; okraj-horná časť: -50 pixelov; )

Mínus túto metódu- výška vnútornej jednotky musí byť známa.

6. Zarovnanie s transformáciou

Túto metódu možno použiť, keď nie je známa výška vnútornej jednotky. Vnútorný rámček musíte posunúť nadol o polovicu výšky vrchu vonkajšieho poľa: 50 %, potom použite vlastnosť transform a zdvihnite ho späť pomocou funkcie translateY(-50%).

css

Vonkajšie ( pozícia : relatívna ; ) .vnútorná ( pozícia : absolútna ; horná : 50 % ; transformácia : preložiťY (-50 % ); )

7. Zarovnanie s pseudoprvkom

Toto je najuniverzálnejšia metóda, ktorú možno použiť, keď výška oboch blokov nie je známa.

Podstatou metódy je pridať inline blok s výškou 100% do vonkajšieho bloku a nastaviť ho na vertikálne zarovnanie. Výška pridaného bloku sa teda bude rovnať výške vonkajšieho bloku. Vnútorný blok sa zarovná vertikálne vzhľadom na pridaný, a teda vonkajší blok.

Aby sa neporušila sémantika, je žiaduce pridať inline blok pomocou pseudoprvkov pred alebo za.

css

Vonkajšie :pred ( display : inline-block ; height : 100 % ; vertical-align : middle ; content : "" ; ) .inner ( display : inline-block ; vertical-align : middle ; )

Nevýhodou tohto spôsobu je, že ho nemožno použiť s absolútnym umiestnením vnútornej jednotky.

8. Zarovnanie s Flexboxom

Najmodernejším spôsobom vertikálneho zarovnania je použitie flexibilného rozloženia boxu (alebo skrátene Flexbox). Umožňuje flexibilne ovládať umiestnenie prvkov na stránke a umiestniť ich takmer kdekoľvek. Zarovnanie na stred pre Flexbox je veľmi jednoduchá úloha.

css,

HTML

Myslím, že mnohí z vás, ktorí sa zaoberali rozložením, sa stretli s potrebou vertikálneho zarovnania prvkov a vedia, aké ťažkosti vznikajú pri zarovnávaní prvku na stred.

Áno, pre vertikálne zarovnanie v CSS existuje špeciálna vlastnosť vertikálneho zarovnania s mnohými hodnotami. V praxi to však nefunguje podľa predstáv. Skúsme na to prísť.

Porovnajme nasledujúce prístupy. Zarovnanie s:

• stoly,
• odsadenie,
• výška riadku,
• strečing,
• záporná marža,
• transformovať,
• pseudo prvok
• flexbox.

Ako ilustráciu si predstavte nasledujúci príklad.

Existujú dva prvky div, pričom jeden je vnorený do druhého. Dajme im vhodné triedy – vonkajšie a vnútorné .

Cieľom je zarovnať vnútorný prvok do stredu vonkajšieho prvku.

Na začiatok zvážte prípad, keď veľkosti vonkajšieho a vnútorného bloku známy. Pridajme display: inline-block k vnútornému prvku a text-align: center a vertical-align: middle k vonkajšiemu prvku.

Pamätajte, že zarovnanie sa vzťahuje iba na prvky, ktoré majú režim zobrazenia vnorený alebo vložený blok.

Nastavme veľkosti blokov, ako aj farby pozadia, aby sme videli ich okraje.

Vonkajšie ( šírka: 200px; výška: 200px; zarovnanie textu: na stred; zvislé zarovnanie: na stred; farba pozadia: #ffc; ) .vnútorné ( displej: vložený blok; šírka: 100px; výška: 100px; farba pozadia : #fcc ;)
Po použití štýlov uvidíme, že vnútorný blok je zarovnaný horizontálne, ale nie vertikálne:
http://jsfiddle.net/c1bgfffq/

Prečo sa to stalo? Faktom je, že vlastnosť vertical-align ovplyvňuje zarovnanie samotný prvok, nie jeho obsah(okrem prípadov, keď sa použije na bunky tabuľky). Preto aplikovanie tejto vlastnosti na vonkajší prvok nedal nič. Navyše, aplikácia tejto vlastnosti na vnútorný prvok tiež nič neurobí, pretože vložené bloky sú vertikálne zarovnané so susednými blokmi a v našom prípade máme jeden vložený blok.

Na vyriešenie tohto problému existuje niekoľko techník. Pozrime sa bližšie na každý z nich nižšie.

Zarovnanie s tabuľkou

Prvé riešenie, ktoré prichádza na myseľ, je nahradiť vonkajší blok jednobunkovým stolom. V tomto prípade sa zarovnanie použije na obsah bunky, teda na vnútorný blok.

http://jsfiddle.net/c1bgfffq/1/

Zjavnou nevýhodou tohto riešenia je, že z hľadiska sémantiky je nesprávne používať tabuľky na zarovnávanie. Druhou nevýhodou je, že na vytvorenie tabuľky je potrebné pridať ešte jeden prvok okolo vonkajšieho bloku.

Prvé mínus sa dá čiastočne odstrániť nahradením tagov table a td za div a nastavením režimu zobrazenia tabuľky v CSS.

.vonkajší obal ( displej: tabuľka; ) .vonkajší ( displej: bunka tabuľky; )
Vonkajší blok však stále zostane stolom so všetkými z toho vyplývajúcimi dôsledkami.

Zarovnanie s výplňou

Ak sú známe výšky vnútorného a vonkajšieho bloku, potom je možné zarovnanie nastaviť pomocou vertikálnej výplne vnútorného bloku pomocou vzorca: (H vonkajšie - H vnútorné) / 2.

Vonkajšie ( výška: 200px; ) .vnútorné (výška: 100px; okraj: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nevýhodou riešenia je, že je použiteľné len v obmedzenom počte prípadov, keď sú známe výšky oboch blokov.

Zarovnanie s výškou čiary

Ak viete, že vnútorný blok by nemal zaberať viac ako jeden riadok textu, môžete použiť vlastnosť line-height a nastaviť ju na rovnakú výšku ako výška vonkajšieho bloku. Keďže obsah vnútorného bloku by sa nemal zalamovať do druhého riadku, odporúča sa pridať aj medzery: nowrap a overflow: skryté pravidlá.

Vonkajšie ( výška: 200px; výška riadku: 200px; ) .vnútorné (biele miesto: nowrap; pretečenie: skryté; )
http://jsfiddle.net/c1bgfffq/12/

Túto techniku ​​je možné použiť aj na zarovnanie viacriadkového textu, ak prepíšete hodnotu výšky riadka pre vnútorný blok a pridáte zobrazenie pravidiel: inline-block a vertical-align: middle .

Vonkajšie ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

Nevýhodou tejto metódy je, že musí byť známa výška vonkajšieho bloku.

Stretch Alignment

Túto metódu možno použiť, keď výška vonkajšieho bloku nie je známa, ale výška vnútorného bloku je známa.

Na to potrebujete:

1. nastavenie relatívnej polohy k vonkajšiemu bloku a absolútnej polohy k vnútornému bloku;
2. pridajte pravidlá horná: 0 a spodná: 0 k vnútornému bloku, v dôsledku čoho sa roztiahne na celú výšku vonkajšieho bloku;
3. nastavte hodnotu na auto pre zvislé čalúnenie vnútorného bloku.

.vonkajšia ( pozícia: relatívna; ) .vnútorná ( výška: 100px; pozícia: absolútna; hore: 0; dole: 0; okraj: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Podstatou tejto techniky je, že nastavenie výšky pre natiahnutý a absolútne umiestnený blok spôsobí, že prehliadač vypočíta zvislé vypchávky v rovnakom pomere, ak je ich hodnota nastavená na auto.

Zarovnanie so záporným okrajom-vrchol

Táto metóda sa stala všeobecne známou a používa sa veľmi často. Rovnako ako predchádzajúci sa aplikuje, keď nie je známa výška vonkajšieho bloku, ale je známa výška vnútorného.

Vonkajší blok musíte nastaviť na relatívne umiestnenie a vnútorný blok na absolútne umiestnenie. Potom musíte posunúť vnútornú krabicu nadol o polovicu výšky hornej časti vonkajšej krabice: 50 % a posunúť ju nahor o polovicu jej vlastnej výšky okraj-vrchol: -H vnútorné / 2.

Vonkajšia ( pozícia: relatívna; ) .vnútorná ( výška: 100 pixelov; pozícia: absolútna; horná časť: 50 %; okraj navrchu: -50 pixelov; )
http://jsfiddle.net/c1bgfffq/13/

Nevýhodou tejto metódy je, že musí byť známa výška vnútornej jednotky.

Zarovnanie s transformáciou

Táto metóda je podobná predchádzajúcej, ale môže sa použiť, keď nie je známa výška vnútorného bloku. V tomto prípade namiesto nastavenia zápornej výplne v pixeloch môžete použiť vlastnosť transform a zdvihnúť vnútorný rámček pomocou funkcie translateY a hodnoty -50 % .

Vonkajšia ( pozícia: relatívna; ) .vnútorná ( pozícia: absolútna; horná: 50 %; transformácia: preložiťY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Prečo v predchádzajúcej metóde nebolo možné nastaviť hodnotu v percentách? Keďže percentuálne hodnoty vlastnosti marže sa počítajú vzhľadom na nadradený prvok, hodnota 50 % by bola polovica výšky vonkajšieho boxu a vnútorný box by sme potrebovali zvýšiť o polovicu jeho vlastnej výšky. Presne na to slúži vlastnosť transform.

Nevýhodou tejto metódy je, že ju nemožno použiť, ak má vnútorná jednotka absolútne umiestnenie.

Zarovnanie s Flexboxom

Väčšina moderným spôsobom vertikálne zarovnanie je použitie flexibilného rozloženia boxu (populárne známeho ako Flexbox). Tento modul umožňuje flexibilne ovládať umiestnenie prvkov na stránke a umiestniť ich takmer kdekoľvek. Zarovnanie na stred pre Flexbox je veľmi jednoduchá úloha.

Vonkajší blok musí byť nastavený na zobrazenie: flex a vnútorný blok musí byť nastavený na margin: auto. A to je všetko! Nádhera, však?

Vonkajšie ( displej: flex; šírka: 200px; výška: 200px; ) .vnútorné (šírka: 100px; okraj: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nevýhodou tejto metódy je, že Flexbox podporujú iba moderné prehliadače.

Ktorý spôsob si vybrať?

Je potrebné vychádzať z vyjadrenia problému:

• Na vertikálne zarovnanie textu je lepšie použiť zvislé odsadenie alebo vlastnosť line-height.
• Pre absolútne umiestnené prvky so známou výškou (napr. ikony) ideálne fit spôsobom s negatívnou vlastnosťou margin-top.
• Pre zložitejšie prípady, kde výška bloku nie je známa, by sa mal použiť pseudoprvok alebo vlastnosť transform.
• No, ak máte to šťastie, že nepotrebujete podporovať staršie verzie IE, potom je samozrejme lepší Flexbox.

Pri rozvrhnutí je často potrebné vertikálne zarovnanie textu v bloku. Ak to treba urobiť v bunke tabuľky, nastaví sa hodnota vlastnosti CSS vertical-align.

Vynára sa však rozumná otázka, je možné zaobísť sa bez tabuľky bez preťaženia označenia stránky zbytočnými značkami? Odpoveď je áno, ale z dôvodu slabej podpory CSS v prehliadači MSIE sa riešenie tohto problému bude líšiť od riešenia pre iné bežné prehliadače.

Ako príklad si predstavte nasledujúci úryvok:

a skúste zvislo zarovnať text na stred poľa a na spodok poľa.

Riešenie problému

"Správne" prehliadače (vrátane MSIE

Väčšina moderné prehliadače podpora CSS2.1, konkrétne hodnota bunky tabuľky pre vlastnosť display. To nám dáva možnosť vynútiť zobrazenie bloku s textom ako bunky tabuľky a pomocou toho zarovnať text vertikálne:

div (
display:table-cell;
vertikálne zarovnať: stred;
}

div (
display:table-cell;
vertikálne zarovnať: dole;
}

Internet Explorer (do verzie 7 vrátane)

Ak chcete vyriešiť problém zarovnania textu na spodok bloku v MSIE, môžete použiť absolútne umiestnenie (tu potrebujeme inline prvok vnorený do bloku):

div (
poloha: relatívna;
}
div span(
displej:blok;
pozícia: absolútna;
spodná časť: 0 %;
vľavo: 0 %
šírka: 100%
}

Tento súbor pravidiel funguje aj v „správnych“ prehliadačoch.

Zadajte vlastnosti

div span (
displej:blok;
šírka: 100%
}

voliteľné, ale môžu byť potrebné, ak plánujete použiť okrem vertikálneho zarovnania textu aj vodorovné zarovnanie textu, napríklad zarovnanie textu: na stred ;.

Ak chcete zvisle zarovnať text na stred bloku, pôvodný fragment bude musieť byť stále komplikovaný - predstavme si ešte jeden inline prvok:

Materiál na štúdium:

• Vertikálne centrovanie v CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Vertikálne centrovanie pomocou CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Vertikálne zarovnanie (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Ďalší spôsob vertikálneho zarovnania v CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Problém vertikálneho centrovania prvkov v CSS má množstvo hotových riešení. Výber spôsobu zarovnania pre každý z nich samostatný prípad závisí od typu, veľkosti, umiestnenia prvkov a iných vlastností nimi špecifikovaných.

Nižšie sú uvedené techniky vertikálneho zarovnania obľúbené medzi dizajnérmi rozloženia. Ukazuje, ako fungujú a pre ktoré prípady je každý z nich najvhodnejší.

Tu sú dva prvky div:

Každá metóda sa použije na zarovnanie vnútornej jednotky do stredu vonkajšej jednotky.

výška riadku pre jeden riadok

Keď rodič presahuje jeden riadok textu a je známa výška potomka, možno použiť vlastnosť line-height. Hodnota vlastnosti sa musí rovnať výške vonkajšieho poľa. Toto funguje len pre jeden riadok, takže je dobré, aby dieťa pridalo overflow: hidden a white-space: nowrap, aby sa zabránilo zalamovaniu riadkov.

Nebudete môcť použiť line-height=100% ako percento, pretože 100% je v tomto prípade výška písma.

Kontajner(
výška: 300px;
výška riadku: 300 pixelov
}

Vnútorné(
white-space: nowrap;
prepad: skrytý;
}

Metóda je použiteľná len vtedy, keď je známa výška vonkajšieho bloku.

Tabuľka s vertikálnym zarovnaním

Tabuľka je najlepší spôsob vertikálneho zarovnania prvkov. Aby sa neporušila sémantika, je lepšie vytvárať prvky tabuľky pomocou CSS. Poloha obsahu bunky je riadená zvislým zarovnaním. Štyri hodnoty tejto vlastnosti fungujú v tabuľkách:

základná línia - predvolene;
. dno - obsah v spodnej časti bunky;
. stred - obsah v strede bunky;
. top - obsah v hornej časti bunky.

V prvom príklade sa osamelá bunka tabuľky stane vonkajším blokom.

Kontajner(
display:table-cell;
vertikálne zarovnať: stred;
}

Metóda je dobrá, pretože funguje pre prvky bez zadanej výšky, ale v niektorých prípadoch jej použitiu bráni fakt, že vonkajší blok, ako každá bunka tabuľky, prispôsobuje svoju šírku svojmu obsahu a roztiahnete ho iba nastavením explicitne šírka pre šírku. Pre bunku bez tabuľky percentá nefungujú adekvátne.

Tento nedostatok je napravený obalením bunky v rodičovi s vlastnosťou display:table. Veľkosť tohto prvku možno určiť v percentách. Konečný kód bude vyzerať takto:

Vonkajší obal (
display:tabuľka;
}

Kontajner(
display:table-cell;
vertikálne zarovnať: stred;
}

Pozícia: absolútna + záporná marža

Metóda sa používa, keď je známa výška vnútorného prvku. Pre externý blok to môže byť neznáme. Rodič dostane relatívne postavenie a dieťa v ňom je absolútne.

Hodnota vlastnosti top 50 % spôsobí, že vnorený prvok bude umiestnený úplne hore v strede vonkajšieho rámčeka. Zostáva ho zdvihnúť so záporným okrajom o polovicu jeho vlastnej výšky tak, aby stál presne v strede vertikály.

Kontajner(
poloha: relatívna;
}

Vnútorné(
výška: 140px;
pozícia: absolútna;
horná časť: 50 %;
margin-top: -70px;
}

Nevýhodou tejto metódy je nutnosť poznať výšku dieťaťa.

Inline zarovnanie pomocou vertikálneho zarovnania

Zarovnanie vložených prvkov a prvkov vložených do bloku, vrátane obrázkov a ikon, v ich okolitom texte sa vykonáva pomocou vlastnosti vertical-align. Na rozdiel od tabuľky v tomto prípade funguje celý súbor jej hodnôt špecifikovaných v špecifikácii.

Vzhľadom na výšku rodiča možno túto vlastnosť použiť na vycentrovanie viacriadkového textu.

Pre vonkajší blok je predpísané centrovanie jednej línie.

Kontajner(
výška: 140px;
line-height: 140px;
}

Hodnota výšky riadku pre vnútorný blok sa prepíše na normálnu alebo akúkoľvek hodnotu, ktorú chcete. Je mu dané aj zarovnanie vertikálne-zarovnať: stred a prevod na typ inline-block - display: inline-block.

Vnútorné(
displej: inline-block
výška riadku: normálna
vertikálne zarovnať: stred;
}

Nevýhodou tejto metódy je, že potrebujete poznať výšku rodiča.

Zarovnanie s transformáciou

Funkcia translateY vlastnosti transform vám umožňuje vycentrovať vnútorný rámček s neznámou výškou. Na to musí byť rodič relatívne a dieťa absolútne.

Vlastnosť top s hodnotou 50 % zníži vnútorné pole tak, aby jeho horná hrana bola v strede rodiča. Hodnota translateY: -50 % zdvihne prvok o polovicu jeho vlastnej výšky a tým zarovná zvislé stredy políčok.

Kontajner(
poloha: relatívna;
}

Vnútorné(
pozícia: absolútna;
horná časť: 50 %;
transformovať: preložiťY(-50%);
}

Nevýhodou príjmu je obmedzená podpora transformačných funkcií zo strany prehliadača IE.

Zarovnanie pomocou pseudoprvku

Metóda funguje, keď výška pre prvý alebo druhý blok nie je známa. Vložený pseudoprvok vložený blok sa pridá do rodiča pomocou pred alebo za . Výška pridaného prvku sa musí rovnať výške nadradeného prvku - výška: 100 %. Vertikálne zarovnanie obsahu je nastavené pomocou vertikálneho zarovnania: na stred.

Vertical-align: middle zarovná vnútorný blok vzhľadom na tento pseudo-prvok. Keďže rodič a potomok sú v rovnakej výške, vnútorný prvok, hoci je vertikálne zarovnaný s pseudoprvkom, je vycentrovaný aj s vonkajším rámčekom.

Nádoba: pred (
obsah: "";
výška: 100 %;
vertikálne zarovnať: stred;
displej: inline-block
}

Vnútorné(
displej: inline-block
vertikálne zarovnať: stred;
}

Univerzálny spôsob. Nefunguje, ak je vnútorný blok nastavený na absolútne polohovanie.

Flexbox

Najnovší a najjednoduchší spôsob vertikálneho zarovnania prvkov. Flexbox vám umožňuje usporiadať prvky webovej stránky ľubovoľným spôsobom. Ak chcete blok vycentrovať, stačí nastaviť rodiča na zobrazenie: flex a potomka na margin: auto.

Kontajner(
displej:flex;
šírka: 320px
výška: 140px;
}

Vnútorné(
šírka: 120px
okraj: auto;
}

Flexbox funguje iba v moderných prehliadačoch.

Výber metódy

Ktorá technika vertikálneho zarovnania sa má použiť, závisí od úlohy a obmedzení, ktoré môžu byť prítomné v každom konkrétnom prípade.

Výška prvkov nie je známa

V tejto situácii môžete použiť jednu zo štyroch univerzálnych metód:

1. Tabuľka. Rodič je bunka tabuľky vytvorená v HTML alebo cez display-table/display-cell. Tomuto rodičovskému prvku je priradené vertikálne zarovnanie: stred.

2. Pseudoprvok. Pre vonkajší blok sa vytvorí inline-blok pseudoprvok s width=100% a vertical-align: middle. Dieťa dostane zobrazenie: inline-block a vertical-align: middle. Metóda nefunguje iba vtedy, keď je vnútornému bloku dané absolútne umiestnenie.

3. Transformovať. Rodič dostane pozíciu: relatívnu. Dieťa dostane pozíciu: absolútnu, hornú: 50 % a transformáciu: preložiťY(-50 %);

4 Flexbox. Vonkajší blok je nastavený na zobrazenie: flex, vnútorný blok je nastavený na margin: auto.

Známa je len výška dieťaťa

Vonkajší blok je umiestnený relatívne; vnútorný prvok má absolútnu polohu, hore: 50 % a okraj navrchu sa rovná polovici jeho výšky.

Jeden riadok na blok so známou výškou

Vonkajšie pole je nastavené na vlastnosť line-height s hodnotou rovnajúcou sa jeho výške.

Výška vonkajšieho bloku je známa, ale vnútorný prvok nie.

Rodičovi sa priradí výška riadku rovnajúca sa jeho výške. Výška riadku dieťaťa sa predefinuje na normálnu alebo akúkoľvek hodnotu, ktorú chcete, a zobrazí sa: inline-block a vertical-align: middle.

Zarovnanie rôznych prvkov, napríklad na webe alebo stránke, sa spočiatku hodí niekomu náročná úloha ktorý mení vertikálne zarovnanie textu. Iróniou osudu, jeden z najviac ťažké spôsoby Použitie CSS je centrovanie obsahu. Horizontálne centrovanie obsahu je v niektorých časových bodoch relatívne jednoduché. Vertikálne centrovanie obsahu je takmer vždy ťažké. Centrovanie odlišný prvok, ktorý je potrebné vertikálne zarovnať s CSS. Toto je určite veľmi často kladená otázka, ktorá vytvára problémy pre dizajnérov a webmasterov. Existuje však veľa metód na vykonávanie vertikálneho centrovania a každá z nich sa používa pomerne ľahko.

Ak ste to niekedy skúšali, potom je to zložité, najmä ak sa chcete vyhnúť používaniu tabuliek. Našťastie naše volanie o pomoc bolo vypočuté a jednou z nových zbraní pridaných do arzenálu CSS na vyriešenie tohto problému je typ rozloženia známy ako rozloženie flex boxu. Ako o pár okamihov zistíte, poskytuje vám skutočne skvelé funkcie na zjednodušenie zložitých rozložení. Časť tejto skvelej funkcie vám tiež umožňuje vycentrovať obsah vertikálne a horizontálne, čomu sa budeme venovať v tomto návode. Do určitej miery to môžete urobiť pomocou vypchávky, ale môže to viesť k tomu, že vaše rozloženie sa presunie na menšie obrazovky. Pridanie vlastnej triedy CSS do šablóny so štýlmi znamená, že môžete vertikálne vycentrovať akýkoľvek obsah v priebehu niekoľkých sekúnd.

Horizontálne zarovnanie určuje, ako sa ľavý a pravý okraj odseku zhodujú medzi ľavým a pravým okrajom textové pole. Vertikálne zarovnanie určuje umiestnenie znaku v textovom poli vertikálne. Neprítomnosť dobré spôsoby Vertikálne centrovanie prvkov CSS bolo takmer počas celej existencie temnou chybou v jeho reputácii.

Prvá metóda s výškou čiary

Prvá metóda je jednoduchá a do istej miery banálna, pričom existujú nevýhody, ktoré spočívajú v obmedzení aplikácie. Pri kódovaní html stránok pre lokalitu je riadkovanie textového obsahu pravdepodobne jedným z atribútov, ktorý sa zvyčajne ponecháva v predvolenom nastavení. Vo všeobecnosti musíme nastaviť výšku samotnej čiary, ktorá sa dodáva s podobnou výškou pre blok, kde sa používa line-height nehnuteľnosť.

css

Constutesim_first(
orámovanie: 2px plné #bf1515;
výška: 175px;
}
.constutesim_first > p(
line-height:175px;
okraj:0;
text-align:center;
výplň: 0;
veľkosť písma: 17px;
farba: #3152a0;
font-family: Tahoma;
font-weight: bold;
}

Okrem toho môžete okamžite vidieť, ako bude všetko vyzerať v skutočnosti.

Podobným spôsobom je možné implementovať aj nastavenie obrazu, ktorý bude vycentrovaný a bezpodmienečne zvislý. Tu zostáva len zaregistrovať jednu vlastnosť vertikálne zarovnať: stred; ktorý je zodpovedný za zobrazenie obrazu.

css

Druhá variácia (
orámovanie: 2px plná červená;
line-height:158px;
}

Div druhej variácie(
text-align:center;
}
.druhá variácia img (
vertikálne zarovnať: stred;
orámovanie: 0px plné #3a3838;
}

Snímky obrázkov implementujeme v strede a vertikálne.

Zarovnanie s vlastnosťou position

Toto je pravdepodobne najznámejšia metóda, ale najbežnejšia z hľadiska aplikácie pomocou CSS. Tu ale treba dodať, že to tiež nie je ideálne a aj tento spôsob má svoje drobné nuansy, ktoré sú spojené so stredom prvku, že ak sa nastaví v percentách, vycentruje sa na ľavú stranu prvku. horná strana, vo vnútri samotného blogu.

css

Competaird-option (
orámovanie: 2px plné #d40e0e;
výška: 162px;
poloha: relatívna;
}
.competaird-option div (
pozícia: absolútna;
horná časť: 50 %;
vľavo: 50 %
výška: 28 %;
šírka: 49%
marža: -2 % 0 0 -25 %;
orámovanie: 2px plné #4a4848;
}

Riadkovanie alebo výška riadku je vertikálna výška medzi riadkami vykresleného textu HTML stránku. Takmer vždy túto hodnotu vzdialenosti nastaví prehliadač alebo vykresľovací modul na príslušnú hodnotu. Táto hodnota zvyčajne závisí od písma zobrazenej stránky a ďalších faktorov.

Zarovnanie s vlastnosťou tabuľky

Pri tejto metóde používame osvedčené a stará metóda, kde prerobíme prvky do tabuľky, v ktorej sa bunky nachádzajú. Čo sa týka tagu s názvom table, ten sa tu nepoužije, tu nastavíme úplne inak vlastnosť css, je display: table;, display: table-cell;. Ak hovoríme o najstarších verziách IE, potom sa tu údaje jednoducho nezobrazia. Dúfam, že ste aktualizovali svoj prehliadač, pretože už nie je relevantný a takmer všetko sa nezobrazuje správne.

Cherevertova variácia (
orámovanie: 2px plné #c30b0b;
výška: 173px;
display:tabuľka;
šírka: 100%
veľkosť písma: 17px;
font-weight: bold;
farba: #3945a0;
}

Cherevert-variation div(
display:table-cell;
vertikálne zarovnať: stred;
text-align:center;
}

Najprv sa pozrime, aké je predvolené nastavenie, ktoré používa väčšina prehliadačov. Vo väčšine moderných denných prehliadačov riadkovanie.

Zarovnanie s vlastnosťou flex

Tu sa dostávame k originálnejšej verzii, ktorá má svoje vlastné vlastnosti, ktoré sa zriedka nachádzajú v rozložení internetového zdroja. Ale stále sa používajú, že v niektorých prípadoch sú užitočné. Tým sa vytvorí primárna os, takže definícia smerových ohybných prvkov je umiestnená v kontajneri na disketu.

css

Variant-horizontálne (
orámovanie: 2px plné #d20c0c;
výška: 147px;
displej:flex;
align-items: center;
zdôvodniť-obsah: stred;
veľkosť písma: 18px;
font-weight: bold;
farba: #49518c;
}

Môžete zadať hodnotu pre výšku riadku rovnako, ako by ste zadali akúkoľvek inú veľkosť v css, buď ako číslo, veľkosť v pixeloch alebo ako percento.

Zarovnanie s vlastnosťou transform

A teraz sa dostávame k najextrémnejšej metóde, no nie najnovšej v aplikácii pri používaní jeho web dizajnu. Všetko je tu jednoduché, musíte sa pohybovať vertikálne daný prvok na hodnotu, ktorú potrebujete. Nehnuteľnosť transformovať, je zoznam transformácií, ktoré inštalátor použije pri inštalácii balíka. Setter aplikuje transformácie v rovnakom poradí, v akom sú špecifikované vo vlastnosti.

css

vertikálna medilpasudsa (
orámovanie: 2px plné #e00a0a;
výška: 158px;
veľkosť písma: 19px;
font-weight: bold;
farba: #353c71;
}
.vertical-medilpasudsa > div(
poloha: relatívna;
horná časť: 50 %;
transformovať: preložiťY(-50%);
text-align:center;
}

Keď zadáte hodnoty ako číslo, bude to založené na aktuálnej veľkosti písma ako základ. Aktuálna veľkosť písma sa vynásobí číslom, ktoré zadáte, aby sa vypočítala výška riadku alebo medzera medzi riadkami.

Ak chcete znaky zarovnať na stred prvku vodorovne, musíte použiť zarovnanie textu: na stred. Jedna možnosť, ak ho chcete vertikálne vycentrovať a máte pevnú pätu hlavičky a jeden riadok textu, nastavte výšku riadku tak, aby bola rovnaká ako výška päty.

Ak potrebujete vycentrovať text vo vnútri prvku, ako je div, hlavička alebo odsek, môžete to použiť vlastnosť zarovnania textu CSS.

Zarovnanie textu má niekoľko platných vlastností:

centrum: Textúra je vycentrovaná;
vľavo: Zarovná sa na ľavú stranu kontajnera;
správny: Zarovnané na pravú stranu nádoby
odôvodniť: Nútené zarovnať s ľavým aj pravým okrajom nádoby, s výnimkou extrémnych čiar;
ospravedlniť všetko: Vynúti najvzdialenejší reťazec, aby zarovnal znaky;
začať: To isté ako vľavo, len ak je smer zľava doprava. Ale bude správne, ak na začiatku nastavíte smer smeru textu, čo sa stane sprava doľava;
koniec: Opak začiatku;
zodpovedať rodičovi: Podobne ako pri dedení, s výnimkou toho, že začiatok a koniec sú relatívne k rodičovskému prvku;

Tieto vlastnosti použite na zarovnanie textu v rámci nadradeného prvku alebo prvku typu wrapper. Ak chcete vycentrovať text v prvku vodorovne, musíte použiť zarovnanie textu: na stred.

Jedna možnosť, ak ho chcete vertikálne vycentrovať, ak máte pevnú pätu hlavičky a jeden riadok textu, nastavte výšku riadku tak, aby bola rovnaká ako výška päty.