Jak horinzontálně vycentrovat stránku

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;}