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

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:

libovolný prvek
libovolné výšky
a libovolného obsahu (z databáze)
zůstává vertikálně vystředěný

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

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.