o tvorbě, údržbě a zlepšování internetových stránek
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 | horní index (nezmenšený) | nelze použít (počítáno jako baseline) |
| super | dolní 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 s horním okrajem řádku | 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 lícuje se spodkem řádku | 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 ve dvou případech:
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5.0 | pouze hodnoty baseline, sub a super (horní a dolní index) | |
| 5.5, 6 | všechny hodnoty | |
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | skoro ne | pouze pro buňky tabulky |
Č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>
Jak psát web píše Yuhů, Dušan Janovský. Poslední aktualizace 01. května 2004.