Vertikální centrování v CSS
Yuhůovo definitivní řešení neznámé výšky
V CSS sice existuje vlastnost vertical-align, ale neřeší následující problém.
Definice problému
- mám oblast stránky, u níž znám výšku (třeba <div>)
- uvnitř mám vnitřní objekt v <divu> (třeba dlouhý text) neznámé výšky
- chci ten vnitřní objekt v oblasti vertikálně vycentrovat
- a bez tabulek.
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.
Postupem času jsem byl pro novější prohlížeče nucen přepsat příklady a detaily řešení. Nově odzkoušené příklady najdete pouze v anglické verzi tohoto návodu, tuto českou neudržuji.
Myšlenka řešení
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 Exploreru (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 6, ostatní prohlížeče ne. S nástupem IE 7 jsem musel změnit i příklad a místo podtržítka použít jiný znak, například křížek #. (Místo podtržítkového hacku také můžete použít podmíněné komentáře pro IE.)
Kompatibilita
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.
Výsledný zápis:
<!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
Výsledek vypadá takto:
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, vertical centering using display: flex
Publikováno 21. září 2004
Reklama
