Šuplík Honzy Hučína

Skok na navigaci (menu)

Tento blog je v současné době uzavřen.
Pokračování blogu na bloguje.cz jsem zrušil. Pokud budu někdy pokračovat, bude to spíš tady.

Komentovaný článek

Internet a vše kolem

9. 9. 2004

Vertikální centrování - zlepšovák

Pixy dnes v noci zveřejnil řadu velmi užitečných tipů ohledně webdesignu pomocí CSS. Zabývá se hlavně vícesloupcovou sazbou a nutno říct, že finta s obrázkem jako pozadím pozicovaným pomocí procent je pěkná a užitečná.

Článek Deset triků CSS, které možná neznáte, na který Pixy také odkazuje, přináší řešení jednoho ze závažných webdesignerských problémů: vertikální vycentrování řádku v bloku. Trik s pomocí CSS vlastnosti line-height je Kolumbovo vejce. Ale má bohužel slabinu: jakmile je řádek v bloku příliš dlouhý (například při příliš velkém písmu a úzkém bloku), přeteče z bloku ven a je po parádě (příklad).

Napadlo mě řešení, které podobnou situaci ošetří – možná už je notoricky známé, ale já jsem o něm neslyšel. Do bloku s nastavenou výškou se vloží další blokový prvek s nastaveným horním a dolním paddingem tak, aby to vytvářelo dojem vertikálního centrování:

#blok {
height:5em;
border:1px solid black;
width:600px;
text-align:center;
}

#vnitrek {
padding-top:2em;
padding-bottom:2em;
margin:0
}

...

<body>
<div id="blok">
<p id="vnitrek">Toto je pokus o vertikálně centrovaný blok. Zvětšením písma se tolik nepoškodí.</p>
</div>
</body>

Prohlédněte si příklad. Sice se v případě přetečení řádku vertikální centrování poruší, ale layout aspoň nezhavaruje tak, jako při použití line-height.

Aktualizace: Yuhů, jak se zdá, vyřešil problém vertikálního centrování definitivně.

Vložit vlastní komentář – Návrat k článku – RSS komentářů tohoto článku