Vertical-align
CSS vlastnost vertical-align určuje zarovnání na výšku.
| 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:
- zarovnání nízkého prvku (např. obrázku) na vyšší řádce (výška řádku se dá zvýšit vlastnosti line-height),
- poloha prvku, který má nastaveno display: inline-block, na řádce,
- výškové zarovnání obsahu buňky tabulky (tag <td>), ekvivalent zastaralého atributu valign
- nebo je z něčeho potřeba udělat horní nebo dolní index (a nelze použít tagy <sub> a <sup>)
Podpora
| 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
Reklama
