Toto je příklad oboustranného (horizontálního i vertikálního) centrování boxu na stránce pomocí CSS. Centrovaný box (kde se nachází tento text) má pevné rozměry 550 (šířka) x 300 (výška) pixelů. Pokud se do něj obsah nevejde, lze jím posouvat svislým posuvníkem vpravo.
Celý obsah této stránky je "zabalen" do prvku <div> s unikátním atributem id. Kód vypadá nějak takto:
<div id="page">
...
zde je obsah stránky
...
</div>
V definici CSS pak jsou definována pravidla pro <body> dokumentu a pro <div> s atributem id = page. Vypadá to takto:
body {
margin: 0;
padding: 0;
color: #000;
background : #ffc none;
}
#page {
width: 550px;
height: 300px;
padding: 10px;
border: 2px solid #cc9;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -275px;
overflow: auto;
color: #000;
background : #fff none;
voice-family: "\"}\"";
voice-family: inherit;
margin: -162px 0 0 -287px;
}
Příklad byl testován v IE 5.0, kde je plně funkční a v Opeře 5.12, kde nefunguje pravidlo overflow: auto; a text tedy přetéká přes spodní okraj centrovaného boxu.
Kvůli IE 5 a jeho nesprávné interpretaci rozměrů (šířky a výšky) boxů jsme použili trik s pravidly
voice-family: "\"}\"";
voice-family: inherit;
IE 5 tato pravidla mylně považuje za ukončení definice daného selektoru a za nimi definovaná pravidla přeskočí. To umožňuje nejprve nadefinovat výšku a šířku, resp. absolutní pozici pro IE 5 a pak ji předefinovat pro NN 6 a Operu.
Poznatky z dalších prohlížečů uvítáme na adrese redakce@sovavsiti.cz.
K dispozici jsou další příklady centrování, konkrétně na horizontální centrování boxu s plovoucí šířkou, horizontální centrování boxu s pevnou šířkou a horizontální i vertikální centrování boxu s plovoucími rozměry.