O webu
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ů:

Rozhození výšky řádku

Možné hodnoty

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

Zarovnání baseline (výchozí)
Zarovnání sub (dolní index)
Zarovnání super (horní index)
Zarovnání middle (střed)
Zarovnání top (nahoru na řádek)
Zarovnání bottom (dolů na řádek)
Zarovnání text-top (nahoru dle textu)
Zarovnání text-bottom (dolů dle textu)

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ě.

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

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:

middle top výchozí
bottom

Samostatná živá ukázka

Zarovnání v <div>u

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

Svisle centrovaný blok

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í.