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á rozměry závislé na velikosti okna prohlížeče, konkrétně šířku 80% a výšku 70% okna. 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: 80%;
height: 70%;
padding: 2%;
border: 2px solid #cc9;
position: absolute;
top: 15%;
left: 10%;
overflow: auto;
color: #000;
background : #fff none;
voice-family: "\"}\"";
voice-family: inherit;
top: 13%;
left: 8%;
}
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 pevnými rozměry.