CSS zarovnání vertical-align

CSS vlastnost vertical-align slouží k svislému zarovnávání. Ošemetné na ní je, že funguje jen za určitých podmínek.

1. Zarovnává se umístění inline/inline-block elementu na řádek.

2. Zarovnává se obsah buňky tabulky (ať již element <td> nebo cokoliv s display: table-cell).

Zarovnání řádku

Zarovnání se často hodí pro elementy nižší než řádek jako ikonky:

Další případ, kde se vertical-align používá jsou horní a dolní indexy, které ve výchozím zobrazení rozhazují výšku řádků:

Možné hodnoty

Na následující ukázce je vidět zarovnání malého čtverečku do řádku klíčovými slovy:

V některých případech se mohou některé způsoby zarovnání chovat totožně. Typicky, když je nízká výška řádku (line-height), bude top a text-top na stejném místě.

Nízký řádek Vyšší řádek

Byl-li by zarovnávaný element velký přes celý řádek nebo i víc, vertical-align se bude projevovat trochu podivně.

Vysoký element Malý čtvereček

Samostatná živá ukázka

Kromě klíčových slov je možné používat i délkové jednotky a procenta. Ty se odvíjí od výchozího umístění baseline. Kladné hodnoty posunou element směrem nad baseline, záporné pod baseline.

Zarovnání v tabulce

Kromě řádku jde zarovnávat i obsah v buňce tabulky.

Zpravidla se používají hodnoty top, bottom a middle nastavované pro buňky:

Samostatná živá ukázka

Zarovnání v <div>u

Konstrukce vertical-align: middle se dá použít pro svislé centrování:

Světle šedý obal má nastavenou výšku, display: table-cell a vertical-align: middle.

Samostatná živá ukázka

Naprosto klíčové je použít tabulkové zobrazení table-cell pro obalující <div>, jinak se vertical-align neprojeví.