Hodnoty
U každé z následujících hodnot ji použijeme na vložený obrázek uvnitř řádkové položky položky seznamu. Řádkové pole v každém z obrázků má tečkovaný šedý okraj. Řádek, který se používá k zarovnání obrázků pro každou hodnotu, je červený.
baseline Toto je výchozí hodnota. Zarovná účaří prvku s účaří liniového pole. Pokud prvek nemá účaří, zarovná spodní okraj okraje s účaří čáry.
střední Zarovná svislý střed prvku k základní linii čáry plus polovinu výšky x čáry (určeno font).
Toto je jedna z nejčastěji používaných hodnot pro vertical-align vlastnost a obvykle se používá k zarovnání ikon a značek seznamu s textem v řádku.
sub Snižuje účaří prvku do správné polohy pro dolní indexy na řádku. (Tato hodnota nemá žádný vliv na velikost písma textu prvku.)
super Zvedne účaří prvku do správné polohy pro horní indexy na řádku. (Tato hodnota nemá žádný vliv na velikost písma textu prvku.)
text-top Zarovná horní část prvku k horní části oblasti obsahu řádku. Výška oblasti obsahu je jen dostatečně vysoká pro maximální stoupání a klesání všech písem v řádku a čára zarovnání je vrcholem této výšky. Upozorňujeme, že výška může být větší než kterákoli z použitých velikostí písma, v závislosti na základním zarovnání písem.
text-bottom Zarovná spodní část prvku se spodní částí oblasti obsahu linky. Výška oblasti obsahu je dostatečně vysoká pro maximální descendenty a ascendenty všech písem v řádku a čára zarovnání je spodní část této výšky. Upozorňujeme, že výška může být větší než kterákoli z použitých velikostí písma, v závislosti na základním zarovnání písem.
nahoru Zarovná horní část prvku s horní částí celý řádek. To znamená, že pokud jsou na řádku další prvky, které mají různé výšky, například více obrázků, bude horní část řádku stejně vysoká jako nejvyšší ze dvou obrázků.
Pokud má řádek explicitně nastavenou line-height který je vyšší než nejvyšší obsah řádku, horní část řádku bude poté určena touto výškou.
dole
line-height, spodní část řádku je v tomto příkladu určena nejnižšími potomky písma, takže výsledek vypadá podobně jako ten, který jsme dostali z použití text-bottom. Zarovná prvek ke spodní části celého řádku.
Pokud má řádek explicitně nastavený line-height který je nižší než nejnižší obsah řádku, spodní část řádku bude poté určena touto výškou.
line-height který táhne spodní část řádku dolů a obrázek je zarovnán s tímto spodkem.
< procento > Zvedněte prvek nad základní čáru (je-li procentuální hodnota kladná), nebo sklopte prvek níže základní linie (je-li procentuální hodnota záporná) o zadanou částku. Uvedená částka je procentem hodnoty line-height. Hodnota 0% znamená totéž jako baseline.
line-height je 100 pixelů, takže obrázek se zvýší o 50 pixelů nad základní čáru. < délka > Zvedněte prvek nad základní linii (je-li hodnota délky kladná), nebo snižte prvek pod základní linii (pokud je hodnota délky záporná) o uvedenou částku. Hodnota „0“ znamená totéž jako baseline.
Poznámky
Hodnoty top, bottom a middle se při použití na prvky buňky buňky chovají podle očekávání. Jiné hodnoty však mohou mít v některých prohlížečích neočekávané chování. Chris Coyier to říká nejlépe:
Při použití svislého zarovnání v buňkách tabulky je nejlepší sázení nahoře, dole a uprostřed. Žádná z ostatních hodnot stejně nemá smysl a má nepředvídatelné výsledky mezi prohlížeči. Například nastavení buňky na spodní text zarovná text na spodní v IE 6 a na horní v Safari 4. Nastavení na sub způsobí střední zarovnání v IE 6 a horní v Safari 4.
Výchozí svislé zarovnání pro buňky tabulky (<td>) je middle. Výchozí svislé zarovnání pro prvek na úrovni bloku, který má display: table-cell, je však stále top, což je výchozí zarovnání pro úroveň bloku kontejnery obecně. Živý příklad najdete níže v ukázkové sekci.
