Centrování v CSS — příklad 2

Toto je příklad centrování celé stránky o pevné šířce pomocí CSS.

Vnitřní část stránky (kde se nachází tento text) má pevnou šířku 550 pixelů a je umístěna vodorovně na střed okna prohlížeče. Při změně šířky okna prohlížeče se mění šířka jen obou svislých okrajů, nikoli vnitřní části stránky.

Jak je to uděláno

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;
  text-align: center;
}
#page {
  width: 550px;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  border: 2px solid #cc9;
  color: #000;
  background : #fff none;
  text-align: left;
}

Kompatibilita

Zdrojový kód je v souladu s normou XHTML 1.0 a CSS 2 a měl by fungovat ve všech prohlížečích s alespoň částečnou podporou CSS 1. Příklad byl testován v Opeře 5.12 a IE 5.0. V obou prhlížečích je funkční, nicméně v IE 5.0 chybí spodní okraj (analogický hornímu).

Poznatky z dalších prohlížečů uvítáme na adrese redakce@sovavsiti.cz.

Poznámky ke kompatibilitě

  1. Prohlížečům s bezchybnou podporou CSS by měla ve skutečnosti stačit jednodušší (a z hlediska normy správnější) definice CSS, která by vypadala takto:

    body {
  margin: 0;
  padding: 0;
  color: #000;
  background : #ffc none;
}
#page {
  width: 550px;
  margin: 2em auto;
  padding: 1em;
  border: 2px solid #cc9;
  color: #000;
  background : #fff none;
}

    Od této ideální definice jsme se odchýlili jednak kvůli Opeře, která nezvládá zápis margin: 2em auto; a jednak kvůli IE 5, který nesprávně interpretuje hodnotu auto vlastnosti margin. Kvůli IE 5 je tedy v body definováno pravidlo text-align: center; a jeho zděděný efekt je pak v #page opět zrušen pravidlem text-align: left;.

    Na ostatní prohlížeče tento trik nemá žádný efekt, neboť vlastnost text-align je určena pouze pro řádkové (inline) prvky a zarovnání prvků blokových vůbec ovlivnit nemá.

  2. Druhý problém s kompatibilitou souvísí s chybným výpočtem velikosti boxů v IE 4 a IE 5. Zatímco v prohlížečích s bezchybnou interpretací velikosti boxů bude vnitřek stránky široký přesně 550px, v IE bude ve skutečnosti užší o nastavenou výplň (padding) a rámeček (border).

Další příklady

Nevyhovuje-li vám pevná šířka vnitřního obsahu stránky, je k dispozici příklad řešení s plovoucí šířkou. Pro zvláštní případy jsme připravili i příklady vertikálního centrování.