Vertical-align

CSS vlastnost vertical-align určuje zarovnání na výšku.

vertical-align
hodnoty vertikální zarovnání prvku na vyšším řádku vertikální zarovnání buňky tabulky
baseline prvek leží na účaří řádku na účaří řádku
sub dolní index (nezmenšený) nelze použít (počítáno jako baseline)
super horní index (nezmenšený) nelze použít (jako baseline)
top co nejvýše k hornímu okraji buňky
text-top horní okraj prvku lícuje se střední dotažnicí textu (vršek malých písmenek) nelze použít (jako baseline)
middle střed prvku na střed řádku na střed všech řádků, do kterých zasahuje
bottom co nejníže ke spodnímu okraji buňky
text-bottom spodek prvku má lícovat se spodkem fontu, ale čert ví, co to vlastně dělá, protože je to obvykle moc nahoře nelze použít (jako baseline)
procento procento výšky prvku lícuje s procentem výšky řádku nevím, zda lze použít

Výchozím zarovnáním je poloha na řádku.

Vlastnost vertical-align se dá použít pouze v několika málo případech:

  1. zarovnání nízkého prvku (např. obrázku) na vyšší řádce (výška řádku se dá zvýšit vlastnosti line-height),
  2. poloha prvku, který má nastaveno display: inline-block, na řádce,
  3. výškové zarovnání obsahu buňky tabulky (tag <td>), ekvivalent zastaralého atributu valign
  4. nebo je z něčeho potřeba udělat horní nebo dolní index (a nelze použít tagy <sub> a <sup>)

Podpora

Podpora vlastnosti vertical-align
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 4, 5.0 pouze hodnoty baseline, sub a super (horní a dolní index)
Internet Explorer 5.5, 6, 7, 8, 9 všechny hodnoty, ovšem IE 6 hodnotu text-top dává příliš vysoko (lícuje s horní dotažnicí)
Firefox všechny verze  
Opera všechny verze  
Chrome ano  

 

Příklady

Často chci, aby se mi obsah všech buněk tabulek zarovnával nahoru. Normálně se totiž obsah buněk vertikálně zarovnává na střed. Takže to zarovnání buněk nahoru:

<style>
td {vertical-align: top}
</style>

U některé tabulky budu ale třeba chtít, aby se mi obsahy buněk zarovnaly dolů. Tabulce přidám třídu class="naspodek" a stylopis bude vypadat takhle:

<style>
table.naspodek td {vertical-align: bottom}
</style>

Další příklady

Vertikální zarovnání na řádku

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.