Jak umístit prvky webu pomocí CSS vertikálního zarovnání

Google vyhledávání









Scenérie
Popis






Les

Lorem ipsum dolor sit amet.






Oceán

Lorem ipsum dolor sit amet.

The HTML kód výše vytvoří jednoduchou webovou stránku, která zobrazuje čtyři prvky: propojený text, obrázek, vložené video a tabulku. Ve vašem prohlížeči by to mělo vypadat takto:

Jak svisle zarovnat text

Ve výchozím nastavení je většina textových prvků (jako jsou nadpisy,

, a

Některé textové prvky, jako např a tagy jsou vložené. V důsledku toho podporují vlastnost vertical-align. Chcete-li text zarovnat svisle, jednoduše přiřaďte příslušnou hodnotu vlastnosti CSS vertical-align.

Pomocí svislého zarovnání horní hodnoty na textu

a {
 svisle zarovnat: nahoře;
}

Přidání CSS kód výše k základnímu HTML dokumentu zarovná horní část text tagu s horní částí nejvyššího prvku v řádku. Vytváří následující aktualizovaný displej:

Použití procentní hodnoty na textu

a {
 vertikální zarovnání: -50 %;
}

CSS výše zarovnává textový prvek na pozici, která je 50 % pod účaří nadřazeného prvku. Ve vašem prohlížeči vytvoří následující výstup:

Jak můžete vidět na obrázku výše, prvek text zaujímá pozici pod prvky obrázku a videa, které jsou na stejném řádku. Chcete-li umístit tento prvek na nebo nad základní linii, použijte kladnou procentní hodnotu.

Použití hodnoty délky na textu

a {
 vertikální zarovnání: 90px;
}

Výše uvedený kód zarovná účaří textového prvku na délku 90 pixelů nad účaří nadřazeného prvku. Tím se v prohlížeči vytvoří následující výstup:

Jak vertikálně zarovnat obrázky

The tag je vložený prvek, se kterým dobře funguje vlastnost CSS vertical-align.

Použití superhodnoty svislého zarovnání na snímcích

img {
 vertikální zarovnat: super;
}

Výše uvedený kód umístí obrázek na účaří horního indexu nadřazeného prvku. To znamená na pozici nad základní linií, jak můžete vidět v následujícím výstupu:

Použití hodnoty procenta svislého zarovnání na obrázcích

img {
 svislé zarovnání: 25 %;
}

Výše uvedený kód zarovná účaří prvku obrázku o 25 % nad účaří nadřazeného prvku. To vytváří následující zrcadlový efekt super hodnoty:

Použití hodnoty délky svislého zarovnání na obrázcích

img {
 vertikální zarovnání: 5px;
}

Výše uvedený kód zarovná účaří prvku obrázku na pozici 5 pixelů nad účaří nadřazeného prvku. To vytváří efekt podobný účinku hodnot super a 25 %:

Vložená média, jako jsou videa a prvky iframe, jsou vložené prvky HTML. Proto s nimi vlastnost CSS vertical-align funguje skvěle.

Použití svislého zarovnání super hodnoty u videa

video {
 vertikální-zarovnat: sub;
}

Výše uvedený kód umístí video na účaří dolního indexu nadřazeného prvku. To znamená na pozici pod základní linií, jak můžete vidět v následujícím výstupu:

Použití hodnoty procenta svislého zarovnání u videa

video {
 svislé zarovnání: -25 %;
}

Výše uvedený kód zarovná účaří prvku videa 25 % pod účaří nadřazeného prvku. To vytváří následující zrcadlový efekt dílčí hodnoty:

Použití hodnoty délky svislého zarovnání u videa

video {
 vertikální zarovnání: -5px;
}

Výše uvedený kód zarovná účaří prvku obrázku na pozici 5 pixelů pod účaří nadřazeného prvku. To vytváří efekt jako hodnoty sub a -25 %:

Jak svisle zarovnat položky v tabulce

Použití vlastnosti vertical-align s tabulkou je trochu složitější, protože tabulka je blokový prvek. Nicméně,

Pomocí svislého zarovnání horní hodnoty na datech tabulky

td {
 výška: 40px;
 svisle zarovnat: nahoře;
}

Výše uvedený kód přidá do každé buňky v tabulce výšku 40 pixelů. Poté zarovná data v každé buňce k horní části každého řádku. Tím se v prohlížeči vytvoří následující výstup:

Pomocí svislého zarovnání na střed Value on Table Data

td {
 výška: 40px;
 vertikální zarovnat: střed;
}

Hodnota svislého zarovnání uprostřed v kódu výše svisle vycentruje data v každé buňce. V prohlížeči vytváří následující výstup:

Pomocí svislého zarovnání dolní hodnoty na datech tabulky

td {
 výška: 40px;
 svisle zarovnat: dole;
}

Výše uvedený kód zarovná data v každé buňce na konec každého řádku. V prohlížeči vytváří následující výstup:

Nyní můžete zarovnat prvky na své webové stránce

Vlastnost CSS vertical-align nyní můžete používat s řadou různých vložených prvků, včetně textu, vložených médií a dat tabulek. Obecným pravidlem je, že vlastnost vertical-align funguje pouze u vložených prvků a prvků vložených do bloku.

Tuto vlastnost však můžete použít na prvky bloku, stačí je nejprve převést na prvky inline nebo inline-block. Pamatujte, že vertikální zarovnání můžete kombinovat s dalšími vlastnostmi zarovnání, jako je zarovnání textu.

O autorovi

Kadeisha Kean (52 zveřejněných článků)

Kadeisha Kean je vývojář úplného softwaru a technický/technologický autor. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; vyrábí materiál, který může snadno pochopit každý technologický nováček. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).

Více od Kadeishy Kean