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.