Yuhůovo definitivní řešení neznámé výšky
V CSS sice existuje vlastnost vertical-align, ale neřeší následující problém.
Do včerejška nebylo známo komplexní řešení, jak to udělat pouze v CSS (tabulkou to šlo). Včera cestou domů jsem to ve Wilsonovce vymyslel.
Podstata řešení v Exploreru spočívá v tom, že se objekt napozicuje absolutně do poloviny výšky vnější oblasti a potom se posune nahoru o polovinu své výšky. Využívá to chybné interpretace vlastnosti height v Exploeru (výška vypočítaná podle obsahu se chybně stává základem procentuálního výpočtu výšky vnořených prvků). Pro Explorer je třeba přidat jeden prostřední mezitag (div).
Podstata řešení v Mozille, Opeře a v dalších standardních prohlížečích spočívá v tom, že se vnější oblast označí za tabulku (display: table) a prvek se označí jako buňka tabulky (display: table-cell). Na ni potom už funguje vlastnost vertical-align.
Nakonec se pomocí podtržítkového hacku oba zápisy spojí. Podrtžítkový hack se zakládá na faktu, že pokud před css vlastnost napíšu podtržítko (například _position: místo position:), tak to vidí jenom Internet Explorer, ostatní prohlížeče ne. (Místo podtržítkového hacku můžete použít podmíněné komentáře pro IE.)
Níže uvedená konstrukce funguje v Internet Exploreru 5.0, 5.5 i 6.0, v prohlížečích s jádrem Gecko všech verzí (Mozilla, Firefox, Netscape 7), v Opeře 7 a v Safari (Konqueror netestován). Nezáleží na tom, zda je stránka v HTML, XHTML nebo v quirk módu.
Příklady nefungují v IE 5.2 pro Mac. Protože Maca nemám, nemůžu to ladit. Pokud vás napadne nějaké řešení pro tento prohlížeč, dejte mi prosím vědět.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Univerzální vertikální centrování</title>
<style>
.greenBorder {border: 1px solid green;} /* nepodstatný styl */
</style>
</head>
<body>
<div class="greenBorder" style="display:
table; height: 400px;
_position:
relative; overflow: hidden;">
<div style=" _position: absolute;
_top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style="
_position: relative;
_top: -50%">
libovolný prvek<br>
libovolné výšky<br>
a libovolného obsahu<br>
zůstává vertikálně vystředěný
</div>
</div>
</div>
</body>
</html>
Zobrazit příklad v prohlížeči.
Barevná legenda:
styly pro všechny prohlížeče
styly pro standardní prohlížeče
styly pro Internet Explorer
Zobrazit příklad v prohlížeči.
Článek pokračuje v anglické verzi strukturovaným zápisem bez hacků.
Příklad: Vertical centering in valid CSS
Děkuji za testování Chosemu, Lukášovi Mačímu a Pixymu.
Publikováno 21. září 2004
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.