Každý, kdo se podílí na rozvržení, dříve nebo později čelí potřebě zarovnat prvky svisle... a ví, jaké potíže mohou nastat při zarovnání prvku na střed. CSS má vlastnost `vertical-align` s více hodnotami, což by logicky mělo fungovat vertikální zarovnání. V praxi to však nefunguje podle očekávání.

Existuje několik technik, jak tento problém vyřešit. Podívejme se níže na každý z nich blíže.

1. Zarovnání s tabulkou

V tomto případě nahrazujeme vnější blok tabulkou s jednou buňkou. Zarovnání bude aplikováno na obsah buňky, tedy vnitřní blok.

HTML

css

Vnější ( šířka : 200px ; výška : 200px ; zarovnání textu : na střed ; svislé zarovnání : na střed ; barva pozadí : #ffc ; )

Hlavní nevýhoda toto rozhodnutí, z hlediska sémantiky - použití tabulky není k určenému účelu. Druhou nevýhodou je, že pro vytvoření tabulky je potřeba přidat jeden prvek navíc venkovní jednotka.

První negativum lze částečně vrátit zpět nahrazením značek tabulky divs a nastavením režimu zobrazení tabulky v CSS.

HTML

css

Vnější obal ( display : table ; ) .uter ( display : table-cell ; )

2. Zarovnání s vycpávkou

Za předpokladu, že známe výšky vnitřních a vnějších bloků, lze zarovnání nastavit pomocí svislých odsazení vnitřního bloku podle vzorce: (H vnější - H vnitřní) / 2.

css

Vnější (výška: 200px;) .vnitřní (výška: 100px; okraj: 50px 0;)

Nevýhodou řešení je povinná znalost výšky obou bloků.

3. Zarovnání s výškou čáry

Pokud vnitřní blok nezabírá více než jeden řádek textu, můžete použít vlastnost line-height a nastavit ji na stejnou výšku vnějšího bloku. Vzhledem k tomu, že obsah vnitřního bloku by neměl jít do druhého řádku, je dobré přidat i skrytá pravidla: nowrap a overflow:.

css

Vnější ( výška : 200px ; výška řádku : 200 px ; ) .vnitřní ( white-space : nowrap ; přetečení : skryté ; )

Tuto metodu lze také použít k zarovnání víceřádkový text. Chcete-li to provést, vnitřní blok musí přepsat hodnotu výšky řádku a přidat pravidla zobrazení: inline-block a vertical-align: middle .

css

Vnější (výška: 200px; výška-řádku: 200px;) .vnitřní (výška-řádku: normální; zobrazení: vložený blok; svislé zarovnání: na střed; )

Nevýhodou této metody je, že musí být známa výška vnějšího bloku.

4. Zarovnání s „roztažením“

Tuto metodu lze použít, když je nám známa výška vnitřního bloku, ale vnější ne.

Chcete-li uplatnit tato metoda Potřebujeme:

• Nastavte vnější blok na pozici: relativní a vnitřní blok na absolutní pozici: absolutní ;
• Přidejte do vnitřního bloku nějaká pravidla top: 0 a bottom: 0, v důsledku čehož se roztáhne na celou výšku vnějšího bloku;
• Nastavte vertikální výplň vnitřního bloku na auto .

css

Vnější (pozice: relativní;) .vnitřní (výška: 100px; poloha: absolutní; nahoře: 0; dole: 0; okraj: auto 0;)

5. Zarovnání se záporným horním okrajem

Podobně jako v předchozím případě se tato metoda používá, když není známa výška vnějšího bloku, ale je známa výška vnitřního bloku.

Musíte nastavit vnější blok na relativní umístění a vnitřní blok na absolutní umístění. Poté posuňte vnitřní krabici dolů o polovinu výšky horní části vnější krabice: 50 % a posuňte ji nahoru o polovinu její vlastní výšky margin-top: -H _vnitřní / 2 .

css

Vnější (pozice: relativní; ) .vnitřní (výška: 100px; pozice: absolutní; nahoře: 50 %; margin-top: -50px; )

Mínus tato metoda- výška vnitřní jednotky musí být známa.

6. Zarovnání s transformací

Metodu lze použít, když výška vnitřní jednotky není známa. Musíte posunout vnitřní rámeček dolů o polovinu výšky horního okraje vnějšího rámečku: 50 % , poté použijte vlastnost transform a zvedněte jej zpět pomocí funkce translateY(-50%).

css

Vnější ( pozice : relativní ; ) .vnitřní ( pozice : absolutní ; nahoře : 50 % ; transformace : přeložitY (-50 % ); )

7. Zarovnání s pseudoprvkem

Jedná se o nejuniverzálnější metodu, kterou lze použít, když výšky obou bloků nejsou známy.

Podstatou metody je přidat inline blok o výšce 100 % dovnitř vnějšího bloku a nastavit jej na vertikální zarovnání. Výška přidaného bloku se tedy bude rovnat výšce vnějšího bloku. Vnitřní blok se zarovná svisle s ohledem na přidaný, a tedy i vnější blok.

Aby nedošlo k porušení sémantiky, je žádoucí přidat inline blok pomocí pseudoprvků před nebo za.

css

Outer :before ( display : inline-block ; height : 100 % ; vertical-align : middle ; content : "" ; ) .inner ( display : inline-block ; vertical-align : middle ; )

Nevýhodou této metody je, že ji nelze použít s absolutním umístěním vnitřní jednotky.

8. Zarovnání s Flexboxem

Nejmodernějším způsobem vertikálního zarovnání je použití flexibilního rozvržení krabice (nebo zkráceně Flexbox). Umožňuje flexibilně ovládat umístění prvků na stránce a umístit je téměř kamkoli. Zarovnání na střed pro Flexbox je velmi jednoduchý úkol.

css,

HTML

Myslím, že mnozí z vás, kteří se zabývali rozvržením, se setkali s potřebou zarovnat prvky vertikálně a ví, jaké potíže vznikají při zarovnání prvku na střed.

Ano, pro vertikální zarovnání v CSS existuje speciální vlastnost vertical-align s mnoha hodnotami. V praxi to však nefunguje podle očekávání. Zkusme na to přijít.

Porovnejme následující přístupy. Zarovnání s:

• stoly,
• odsazení,
• výška čáry,
• protahování,
• záporná marže,
• přeměnit ,
• pseudo prvek
• flexbox.

Jako ilustraci uvažujme následující příklad.

Existují dva prvky div, přičemž jeden je vnořen do druhého. Dejme jim příslušné třídy – vnější a vnitřní .

Cílem je zarovnat vnitřní prvek do středu vnějšího prvku.

Pro začátek zvažte případ, kdy jsou velikosti vnějšího a vnitřního bloku známý. Přidejme display: inline-block k vnitřnímu prvku a text-align: center a vertical-align: middle k vnějšímu prvku.

Pamatujte, že zarovnání se vztahuje pouze na prvky, které mají režim zobrazení inline nebo inline-block.

Nastavíme velikosti bloků a také barvy pozadí, abychom viděli jejich okraje.

Vnější ( šířka: 200px; výška: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc ;)
Po použití stylů uvidíme, že vnitřní blok je zarovnán vodorovně, ale ne svisle:
http://jsfiddle.net/c1bgfffq/

Proč se to stalo? Faktem je, že vlastnost vertical-align ovlivňuje zarovnání prvek samotný, nikoli jeho obsah(kromě případů, kdy je aplikován na buňky tabulky). Proto použití této vlastnosti na vnější prvek nedal nic. Navíc aplikace této vlastnosti na vnitřní prvek také nic neudělá, protože vložené bloky jsou svisle zarovnány se sousedními bloky a v našem případě máme jeden vložený blok.

Existuje několik technik, jak tento problém vyřešit. Podívejme se níže na každý z nich blíže.

Zarovnání s tabulkou

První řešení, které mě napadá, je nahrazení vnějšího bloku tabulkou s jednou buňkou. V tomto případě bude zarovnání aplikováno na obsah buňky, tedy na vnitřní blok.

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

Zjevnou nevýhodou tohoto řešení je, že z hlediska sémantiky je chybné používat k zarovnání tabulky. Druhou nevýhodou je, že pro vytvoření tabulky je potřeba přidat kolem vnějšího bloku ještě jeden prvek.

První mínus lze částečně odstranit nahrazením tagů table a td div a nastavením režimu zobrazení tabulky v CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Vnější blok však stále zůstane stolem se všemi z toho vyplývajícími důsledky.

Zarovnání s vycpávkou

Pokud jsou známy výšky vnitřního a vnějšího bloku, lze zarovnání nastavit pomocí svislého vyložení vnitřního bloku pomocí vzorce: (H vnější - H vnitřní) / 2.

Vnější ( výška: 200px; ) .vnitřní (výška: 100px; okraj: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nevýhodou řešení je, že je použitelné pouze v omezeném počtu případů, kdy jsou známé výšky obou bloků.

Zarovnání s výškou čáry

Pokud víte, že vnitřní blok by neměl zabírat více než jeden řádek textu, můžete použít vlastnost line-height a nastavit ji na stejnou výšku vnějšího bloku. Vzhledem k tomu, že obsah vnitřního bloku by se neměl zalamovat do druhého řádku, doporučuje se přidat také pravidla white-space: nowrap a overflow: hidden.

Vnější ( výška: 200px; výška řádku: 200px; ) .vnitřní ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/

Tuto techniku ​​lze také použít k zarovnání víceřádkového textu, pokud přepíšete hodnotu výšky řádku pro vnitřní blok a přidáte zobrazení pravidel: inline-block a vertical-align: middle .

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

Nevýhodou této metody je, že musí být známa výška vnějšího bloku.

Roztažení zarovnání

Tuto metodu lze použít, když je neznámá výška vnějšího bloku, ale je známa výška vnitřního bloku.

K tomu potřebujete:

1. nastavení relativní polohy k vnějšímu bloku a absolutní polohy k vnitřnímu bloku;
2. přidejte pravidla top: 0 a bottom: 0 k vnitřnímu bloku, v důsledku čehož se roztáhne na celou výšku vnějšího bloku;
3. nastavte hodnotu na auto pro vertikální výplň vnitřního bloku.

.vnější ( pozice: relativní; ) .vnitřní ( výška: 100px; pozice: absolutní; nahoře: 0; dole: 0; okraj: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Podstatou této techniky je, že nastavení výšky pro roztažený a absolutně umístěný blok způsobí, že prohlížeč vypočítá vertikální výplň ve stejném poměru, pokud je jejich hodnota nastavena na auto.

Zarovnání se záporným okrajem-vrchol

Tato metoda se stala široce známou a používá se velmi často. Stejně jako předchozí se použije, když výška vnějšího bloku není známa, ale výška vnitřního bloku je známá.

Musíte nastavit vnější blok na relativní umístění a vnitřní blok na absolutní umístění. Poté musíte posunout vnitřní krabici dolů o polovinu výšky horní části vnější krabice: 50 % a posunout ji nahoru o polovinu její vlastní výšky okraj-horní: -H vnitřní / 2.

Vnější ( pozice: relativní; ) .vnitřní ( výška: 100px; pozice: absolutní; nahoře: 50 %; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Nevýhodou této metody je, že musí být známa výška vnitřní jednotky.

Zarovnání s transformací

Tato metoda je podobná předchozí, ale lze ji použít, když není známa výška vnitřního bloku. V tomto případě můžete místo nastavení záporné výplně v pixelech použít vlastnost transform a zvednout vnitřní rámeček pomocí funkce translateY a hodnoty -50 % .

Vnější ( pozice: relativní; ) .vnitřní ( pozice: absolutní; nahoře: 50 %; transformace: přeložitY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Proč v předchozí metodě nebylo možné nastavit hodnotu v procentech? Vzhledem k tomu, že procentuální hodnoty vlastnosti margin se počítají vzhledem k nadřazený prvek, hodnota 50 % by byla polovina výšky vnější krabice a vnitřní krabici bychom museli zvednout o polovinu její vlastní výšky. Přesně k tomu slouží vlastnost transform.

Nevýhodou této metody je, že ji nelze použít, pokud má vnitřní jednotka absolutní umístění.

Zarovnání s Flexboxem

Většina moderním způsobem vertikální zarovnání je použití flexibilního rozvržení boxu (populárně známého jako Flexbox). Tento modul umožňuje flexibilně ovládat umístění prvků na stránce a umístit je téměř kamkoli. Zarovnání na střed pro Flexbox je velmi jednoduchý úkol.

Vnější blok musí být nastaven na zobrazení: flex a vnitřní blok musí být nastaven na margin: auto. A to je všechno! Krásné, že?

Vnější ( displej: flex; šířka: 200px; výška: 200px; ) .vnitřní ( šířka: 100px; okraj: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nevýhodou této metody je, že Flexbox podporují pouze moderní prohlížeče.

Jaký způsob zvolit?

Je třeba vycházet z popisu problému:

• Pro vertikální zarovnání textu je lepší použít vertikální odsazení nebo vlastnost line-height.
• Pro absolutně umístěné prvky se známou výškou (např. ikony) ideální fit způsobem se zápornou vlastností margin-top.
• Pro složitější případy, kdy výška bloku není známa, by se měl použít pseudoelement nebo vlastnost transform.
• No, pokud máte to štěstí, že nepotřebujete podporovat starší verze IE, pak je samozřejmě lepší Flexbox.

Často je při rozvržení potřeba vertikální zarovnání textu v bloku. Pokud je to nutné provést v buňce tabulky, nastaví se hodnota vlastnosti CSS vertical-align.

Nabízí se však rozumná otázka, lze se obejít bez tabulky, aniž bychom přetěžovali označení stránky zbytečnými značkami? Odpověď je ano, ale kvůli špatné podpoře CSS v prohlížeči MSIE se řešení problému pro něj bude lišit od řešení pro jiné běžné prohlížeče.

Jako příklad zvažte následující úryvek:

a pokuste se svisle zarovnat text na střed rámečku a na spodní část rámečku.

Řešení problému

"Správné" prohlížeče (včetně MSIE

Většina moderní prohlížeče podporují CSS2.1, konkrétně hodnotu buňky tabulky pro vlastnost display. To nám dává možnost vynutit zobrazení bloku s textem jako buňky tabulky a pomocí toho zarovnat text svisle:

div (
display:table-cell;
vertikální zarovnat: střed;
}

div (
display:table-cell;
svisle zarovnat: dole;
}

Internet Explorer (až do verze 7 včetně)

Chcete-li vyřešit problém zarovnání textu na spodní část bloku v MSIE, můžete použít absolutní umístění (zde potřebujeme inline prvek vnořený do bloku):

div (
poloha: relativní;
}
div span(
displej:blok;
pozice: absolutní;
dno: 0 %;
zbývá: 0 %
šířka: 100%
}

Tato sada pravidel funguje i ve „správných“ prohlížečích.

Zadejte vlastnosti

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

volitelné, ale mohou být potřeba, pokud kromě vertikálního zarovnání textu plánujete použít i vodorovné zarovnání textu, například zarovnání textu: na střed ;.

Pro svislé zarovnání textu na střed bloku bude muset být původní fragment stále komplikovaný - uveďme ještě jeden vložený prvek:

Materiál ke studiu:

• Vertikální centrování v CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Vertikální centrování pomocí CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Svislé zarovnání (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Další způsob vertikálního zarovnání v CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Problém vertikálního centrování prvků v CSS má řadu hotových řešení. Výběr způsobu zarovnání pro každý z nich samostatný případ závisí na typu, velikosti, umístění prvků a dalších jimi určených vlastnostech.

Níže jsou uvedeny techniky vertikálního zarovnání oblíbené mezi návrháři rozvržení. Ukazuje, jak fungují a pro které případy je každý z nich nejvhodnější.

Zde jsou dva prvky div:

Každá metoda bude použita k vyrovnání vnitřní jednotky na střed venkovní jednotky.

výška řádku pro jeden řádek

Když rodič zabírá jeden řádek textu a je známá výška potomka, lze použít vlastnost line-height. Hodnota vlastnosti se musí rovnat výšce vnějšího rámečku. Toto funguje pouze pro jeden řádek, takže je dobré, aby dítě přidalo přetečení: skryté a prázdné místo: nowrap, aby se zabránilo zalamování řádků.

Nebudete moci použít line-height=100 % v procentech, protože 100 % je v tomto případě výška písma.

Kontejner(
výška: 300px;
výška řádku: 300px
}

Vnitřní(
white-space: nowrap;
přepad: skrytý;
}

Metoda je použitelná pouze tehdy, když je známa výška vnějšího bloku.

Tabulka s vertikálním zarovnáním

Tabulka je nejlepší způsob, jak zarovnat prvky svisle. Aby nedošlo k porušení sémantiky, je lepší vytvořit prvky tabulky pomocí CSS. Poloha obsahu buňky je řízena vertikálním zarovnáním. V tabulkách fungují čtyři hodnoty této vlastnosti:

baseline - standardně;
. dole - obsah ve spodní části buňky;
. střední - obsah uprostřed buňky;
. top – obsah v horní části buňky.

V prvním příkladu se osamělá buňka tabulky stane vnějším blokem.

Kontejner(
display:table-cell;
vertikální zarovnat: střed;
}

Metoda je dobrá, protože funguje pro prvky bez zadané výšky, ale v některých případech jejímu použití brání to, že vnější blok jako každá buňka tabulky přizpůsobuje svou šířku svému obsahu a roztáhnete jej pouze nastavením šířka pro šířku explicitně. Pro buňku bez tabulky procenta nefungují adekvátně.

Tento nedostatek je opraven zabalením buňky v nadřazeném prvku s vlastností display:table. Velikost tohoto prvku lze nastavit v procentech. Konečný kód bude vypadat takto:

Vnější obal (
display:table;
}

Kontejner(
display:table-cell;
vertikální zarovnat: střed;
}

Pozice: absolutní + záporná marže

Metoda se používá, když je známa výška vnitřního prvku. U externího bloku to může být neznámé. Rodič dostane relativní polohu a dítě uvnitř je absolutní.

Hodnota vlastnosti top 50 % způsobí, že vnořený prvek bude umístěn úplně nahoře uprostřed vnějšího rámečku. Zbývá jej zvednout se záporným okrajem o polovinu jeho vlastní výšky tak, aby stál přesně ve středu svislice.

Kontejner(
poloha: relativní;
}

Vnitřní(
výška: 140px;
pozice: absolutní;
horní: 50 %;
margin-top: -70px;
}

Nevýhodou této metody je nutnost znát výšku dítěte.

Inline zarovnání pomocí vertikálního zarovnání

Zarovnání vložených prvků a prvků inline-block, včetně obrázků a ikon, v jejich okolním textu se provádí pomocí vlastnosti vertical-align. Na rozdíl od tabulky v tomto případě funguje celá sada jejích hodnot specifikovaných ve specifikaci.

Vzhledem k výšce nadřazeného prvku lze tuto vlastnost použít k vystředění víceřádkového textu.

Pro vnější blok je předepsáno centrování jedné linie.

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

Hodnota výšky řádku pro vnitřní blok je přepsána na normální nebo jakoukoli hodnotu, kterou chcete. Dále je mu dáno zarovnání vertical-align: middle a převod na typ inline-block - display: inline-block.

Vnitřní(
displej: inline-block
výška řádku: normální
vertikální zarovnat: střed;
}

Nevýhodou této metody je, že potřebujete znát výšku rodiče.

Zarovnání s transformací

Funkce translateY vlastnosti transform umožňuje vycentrovat vnitřní rámeček s neznámou výškou. K tomu musí být rodič umístěn relativně a dítě musí být polohováno absolutně.

Vlastnost top s hodnotou 50 % sníží vnitřní rámeček tak, aby jeho horní okraj byl uprostřed rodiče. Hodnota translateY: -50 % zvedne prvek o polovinu jeho vlastní výšky a tím zarovná svislé středy rámečků.

Kontejner(
poloha: relativní;
}

Vnitřní(
pozice: absolutní;
horní: 50 %;
transformace: translateY(-50%);
}

Nevýhodou příjmu je omezená podpora transformačních funkcí prohlížečem IE.

Zarovnání pomocí pseudoprvku

Tato metoda funguje, když není výška prvního ani druhého bloku známa. Vložený pseudoprvek vložený blok je přidán do nadřazeného prvku pomocí před nebo za . Výška přidaného prvku se musí rovnat výšce nadřazeného prvku - výška: 100 %. Vertikální zarovnání obsahu je nastaveno pomocí vertikálního zarovnání: na střed.

Vertical-align: middle zarovná vnitřní blok vzhledem k tomuto pseudoprvku. Vzhledem k tomu, že rodič a podřízený prvek mají stejnou výšku, je vnitřní prvek, i když je svisle zarovnán s pseudoprvkem, vycentrován také s vnějším rámečkem.

Kontejner:před (
obsah: "";
výška: 100 %;
vertikální zarovnat: střed;
displej: inline-block
}

Vnitřní(
displej: inline-block
vertikální zarovnat: střed;
}

Univerzální způsob. Nefunguje, pokud je vnitřní blok nastaven na absolutní polohu.

Flexbox

Nejnovější a nejjednodušší způsob vertikálního zarovnání prvků. Flexbox vám umožňuje uspořádat prvky webové stránky libovolným způsobem. Chcete-li blok vycentrovat, stačí nastavit rodiče na zobrazení: flex a potomka na margin: auto.

Kontejner(
displej:flex;
šířka: 320px
výška: 140px;
}

Vnitřní(
šířka: 120px
okraj: auto;
}

Flexbox funguje pouze v moderních prohlížečích.

Volba metody

Kterou techniku ​​vertikálního zarovnání použít, závisí na úkolu a omezeních, která mohou být přítomna v konkrétním případě.

Výška prvků není známa

V této situaci můžete použít jednu ze čtyř univerzálních metod:

1. Tabulka. Rodič je buňka tabulky vytvořená v HTML nebo přes display-table/display-cell. Tomuto rodičovskému prvku je přiřazeno svislé zarovnání: na střed.

2. Pseudoprvek. Pro vnější blok je vytvořen pseudoprvek inline-blok s width=100% a vertical-align: middle. Dítě dostane zobrazení: inline-block a vertical-align: middle. Metoda nefunguje pouze tehdy, když je vnitřnímu bloku přiděleno absolutní umístění.

3. Transformovat. Rodič získá pozici: relativní. Dítě dostane pozici: absolutní, horní: 50 % a transformaci: translateY(-50 %);

4 Flexbox. Vnější blok je nastaven na zobrazení: flex, vnitřní blok je nastaven na margin: auto.

Známá je pouze výška dítěte

Vnější blok je umístěn relativně; vnitřní prvek má absolutní polohu, nahoře: 50 % a okraj nahoře se rovná polovině jeho výšky.

Jeden řádek na blok se známou výškou

Vnější rámeček je nastaven na vlastnost line-height s hodnotou rovnou jeho výšce.

Výška vnějšího bloku je známá, ale vnitřní prvek ne.

Rodič dostane výšku řádku rovnou jeho výšce. Výška čáry potomka je předefinována na normální nebo jakoukoli hodnotu, kterou chcete, a je jí přiděleno zobrazení: inline-block a vertical-align: middle.

Zarovnání různých prvků, například na webu nebo stránce, zpočátku vyhovuje někomu náročný úkol která mění vertikální zarovnání textu. Je ironií, že jeden z nejvíce obtížné způsoby Použití CSS je centrování obsahu. Horizontální vystředění obsahu je v některých okamžicích relativně snadné. Vertikální centrování obsahu je téměř vždy obtížné. Centrování jiný prvek, který je potřeba svisle zarovnat s CSS. To je jistě velmi často kladená otázka, která dělá problémy designérům a webmasterům. Existuje však mnoho metod pro provádění vertikálního centrování a každá z nich je poměrně snadno použitelná.

Pokud jste to někdy zkoušeli, pak je to ošemetné, zvláště pokud se chcete vyhnout používání tabulek. Naštěstí bylo naše volání o pomoc vyslyšeno a jednou z nových zbraní přidaných do arzenálu CSS k vyřešení tohoto problému je typ rozložení známý jako rozložení flex boxu. Jak za pár okamžiků zjistíte, poskytuje vám opravdu skvělé funkce pro zjednodušení složitých rozvržení. Část této skvělé funkce vám také umožňuje centrovat obsah svisle a vodorovně, což je to, čemu se budeme věnovat v tomto tutoriálu. Do určité míry to můžete provést pomocí odsazení, ale může to vést k tomu, že se vaše rozvržení dostane na menší obrazovky. Přidání vlastní třídy CSS do šablony stylů znamená, že můžete svisle vycentrovat jakýkoli obsah během několika sekund.

Horizontální zarovnání určuje, jak se levý a pravý okraj odstavce shodují s levým a pravým okrajem textové pole. Svislé zarovnání určuje umístění znaku v textovém poli svisle. Absence dobré způsoby Vertikální centrování prvků CSS bylo téměř po celou dobu existence temnou chybou v jeho pověsti.

První metoda s výškou řádku

První metoda je jednoduchá a poněkud banální, kde existují nevýhody spočívající v omezení aplikace. Při kódování html stránek pro web je řádkování textového obsahu pravděpodobně jedním z atributů, který je obvykle ponechán ve výchozím nastavení. Obecně musíme nastavit výšku samotné čáry, která má podobnou výšku pro blok, kde je použita výška čáry vlastnictví.

css

Constutesim_first(
ohraničení: 2px solid #bf1515;
výška: 175px;
}
.constutesim_first > p(
line-height:175px;
okraj:0;
text-align:center;
výplň: 0;
velikost písma: 17px;
barva: #3152a0;
rodina písem: Tahoma;
váha písma: tučné;
}

Také můžete okamžitě vidět, jak bude vše vypadat ve skutečnosti.

Obdobným způsobem je možné implementovat jak nastavit obrázek, který bude vycentrovaný a bezpodmínečně vertikální. Zde zbývá pouze zaregistrovat jednu vlastnost vertical-align: middle; který je zodpovědný za zobrazení obrázku.

css

Druhá varianta (
ohraničení: 2px plná červená;
line-height:158px;
}

Div druhé varianty(
text-align:center;
}
.druhá varianta img (
vertikální zarovnat: střed;
ohraničení: 0px solid #3a3838;
}

Snímky obrázků implementujeme uprostřed a svisle.

Zarovnání s vlastností position

Toto je pravděpodobně nejznámější metoda, ale nejběžnější z hlediska aplikace pomocí CSS. Zde je ale nutné dodat, že to také není ideální a i tato metoda má své drobné nuance, které jsou spojeny se středem prvku, že pokud je nastaven procentuálně, bude vycentrován na levé straně prvku. horní strana, uvnitř samotného blogu.

css

Competaird-option (
ohraničení: 2px solid #d40e0e;
výška: 162px;
poloha: relativní;
}
.competaird-option div (
pozice: absolutní;
horní: 50 %;
vlevo: 50 %
výška: 28 %;
šířka: 49%
marže: -2 % 0 0 -25 %;
ohraničení: 2px plné #4a4848;
}

Řádkování nebo výška řádku je svislá výška mezi řádky vykresleného textu HTML stránku. Téměř vždy tuto hodnotu vzdálenosti nastaví prohlížeč nebo vykreslovací modul na příslušnou hodnotu. Tato hodnota obvykle závisí na písmu zobrazené stránky a dalších faktorech.

Zarovnání s vlastností tabulky

Při této metodě používáme osvědčené a stará metoda, kde předěláme prvky do tabulky, ve které jsou umístěny buňky. Co se týče tagu s názvem table, ten zde nebude použit, zde nastavíme úplně jinak vlastnost css, je display: table;, display: table-cell;. Pokud mluvíme o nejstarších verzích IE, pak se zde data jednoduše nezobrazí. Doufám, že jste aktualizovali svůj prohlížeč, protože již není aktuální a téměř vše se nezobrazuje správně.

Cherevertova variace (
ohraničení: 2px solid #c30b0b;
výška: 173px;
display:table;
šířka: 100%
velikost písma: 17px;
váha písma: tučné;
barva: #3945a0;
}

Cherevert-variační div(
display:table-cell;
vertikální zarovnat: střed;
text-align:center;
}

Nejprve se podívejme, jaké je výchozí nastavení, které používá většina prohlížečů. Ve většině moderních denních prohlížečů řádkování.

Zarovnání s vlastností flex

Zde se dostáváme k originálnější verzi, která má své vlastní vlastnosti, které lze jen zřídka nalézt v rozložení internetového zdroje. Ale přesto se používají, že v některých případech jsou užitečné. Tím se stanoví primární osa, takže definice směrových ohebných položek je umístěna v kontejneru na disketu.

css

Varianta-horizontální (
ohraničení: 2px plné #d20c0c;
výška: 147px;
displej:flex;
align-items: center;
justify-content: center;
velikost písma: 18px;
váha písma: tučné;
barva: #49518c;
}

Hodnotu pro výšku řádku můžete zadat stejně, jako byste zadali jakoukoli jinou velikost v css, buď jako číslo, velikost v pixelech nebo jako procento.

Zarovnání s vlastností transform

A nyní se dostáváme k nejextrémnější metodě, ale ne nejnovější v aplikaci v použití jeho webového designu. Všechno je zde jednoduché, musíte se pohybovat vertikálně daný prvek na hodnotu, kterou potřebujete. Vlastnictví přeměnit, je seznam transformací, které instalační program použije při instalaci balíčku. Setter aplikuje transformace ve stejném pořadí, v jakém jsou specifikovány ve vlastnosti.

css

vertikální-medilpasudsa (
ohraničení: 2px solid #e00a0a;
výška: 158px;
velikost písma: 19px;
váha písma: tučné;
barva: #353c71;
}
.vertical-medilpasudsa > div(
poloha: relativní;
horní: 50 %;
transformace: translateY(-50%);
text-align:center;
}

Když zadáte hodnoty jako číslo, bude vycházet z aktuální velikosti písma jako základu. Aktuální velikost písma se vynásobí číslem, které zadáte, aby se vypočítala výška řádku nebo mezera mezi řádky.

Pokud chcete znaky zarovnat vodorovně na střed prvku, musíte použít zarovnání textu: na střed. Jednou z možností, pokud jej chcete svisle vycentrovat a máte pevné zápatí záhlaví a jeden řádek textu, nastavte výšku řádku na stejnou jako výšku zápatí.

Pokud potřebujete vycentrovat text uvnitř prvku, jako je div, záhlaví nebo odstavec, můžete to použít vlastnost text-align CSS.

Zarovnání textu má několik platných vlastností:

centrum: Textura je vycentrovaná;
vlevo, odjet: Zarovná se na levou stranu kontejneru;
že jo: Zarovnáno na pravou stranu kontejneru
ospravedlnit: Nucené zarovnat se s levým i pravým okrajem nádoby, s výjimkou krajních čar;
ospravedlnit-vše: Vynutí nejvzdálenější řetězec, aby zarovnal znaky;
Start: Stejné jako vlevo, pouze pokud je směr zleva doprava. Ale bude správné, pokud zpočátku nastavíte směr směru textu, což se bude dít zprava doleva;
konec: Opak začátku;
odpovídající rodič: Podobně jako u dědičnosti, kromě začátku a konce, je relativní k rodičovskému prvku;

Tyto vlastnosti použijte k zarovnání textu v rámci nadřazeného prvku nebo prvku div. Pokud chcete text v prvku zarovnat vodorovně na střed, musíte použít zarovnání textu: na střed.

Jednou z možností, pokud jej chcete svisle vycentrovat, pokud máte pevné zápatí záhlaví a jeden řádek textu, nastavte výšku řádku na stejnou jako výšku zápatí.