Hotová řešení > Horizontálně vycentrovaná stránka

Horizontálně vycentrovaná stránka

Pokud se podíváme na následující CSS zápis, uvidíme, že vycentrování je způsobeno nastavením hodnot auto pro pravý a levý margin. Pro body jsme definovali ještě text-align: center, aby řešení bylo funkční i ve starších verzích prohlížeče Internet Explorer; ignoruje totiž hodnotu auto. Definici
text-align: center u body pak aplikuje nejen na text, ale i na bloky, tedy i naši stránku, čímž dosáhneme kýženého efektu.

CSS

body {
  margin: 0;
  padding: 0;
  text-align: center; /* Aby to slapalo i ve starsich verzich IE. */
  }

#stranka {
  width: 900px;
  margin: 80px auto 0 auto; /* Auto centruje stranku. */
  border: 1px solid blue;
  text-align: center;
  }

h1 {margin: 20px 0;}


HTML

<div id="stranka">
  <h1>Stránka centrovaná horizontálně na střed</h1>
</div>

Výsledek v prohlížeči

Stáhnout uvedené řešení ↓ (ZIP, staženo 1738×)

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist