tvorba www stránek
tvorba internetových obchodů
programování a vývoj internetových řešení
Kontaktní informace
+420 604 675 156

CSS - vertikální zarovnání v elementu s fixní výškou

Delší dobu jsem měl problémy s vertikálním centrováním v elementu s fixní výškou, ale konečně jsem našel řešení :) je to nakonec (jak se dalo předpokládat) velmi prosté. Fígl na vertikální centrování naleznete v tomto článku.Problém je tedy následující:
CSS:
.menu-item {
height:3em;
width:100px;
text-align:center;
border:1px solid #000;
}
HTML:

Centrovaný text

Uvedený kód se zobrazí jako element s horizontálně vycentrovaným textem, který je však umístěn na horní okraj elementu. Kliknutím na ukázku 1 se zobrazí první fáze problému. V tomto případě nemá význam používat vlastnost vertical-align:center, neboť tato je funkční pouze u stylování tabulkový políček.

V našem případě pomůže CSS vlastnost line-height, která zajistí horizontální vycentrování. Hodnota této vlastnosti musí být totožná s výškou elementu.

Řešení tedy bude:
.menu-item {
height:3em;
width:100px;
text-align:center;
border:1px solid #000;
line-height:3em;
}
Na výsledek této definice se můžete podívat v souboru ukázka2.
Osobně jsem toto řešení ještě nepoužil, protože když jsem na problém vertikálního centrování narazil a neznal jsem tuto metodu, navrhl jsem strukturu CSS malinko jinak a problém jsem tím pádem obešel :)

Komentáře

Komentovat tento článek