Horizontální vycentrování pomocí CSS

Pro zkušené webdesignery toto není žádný oříšek, ale pokud teprve začínáte své stránky kódovat a nebo se vám zčistajasna zamlžil mozek a vy si nemůžete vzpomenout, je zde tento mininávod.

Takže situace je následující, máme jeden <div>, který chceme mít horizontálně vycentrován. Samozřejmě chceme použít CSS a dalším požadavkem je, aby vše bylo validní.
V html kódu máme tedy něco takového :

...
<body>
	<div id="stranka">
	...
	</div>
</body>

Nyní už budeme pracovat pouze se styly – doporučuji používat externí soubor se styly jako nejpřehlednější řešení nastylování html dokumentu. Do stylů tedy zapíšeme jednoduché:

body {
	text-align: center;
}

Tato úprava nám vycentruje text ve všech prvcích vnořených do těla dokumentu. Díky podivné implementaci v Internet Exploreru se v právě zmíněném prohlížečí vycentruje mimo textu i třeba zmíněný<div>. V IE tedy vycentrováno máme (nejlépe když pro <div> nastavím fixní velikost, při použití width: 100%; bychom si asi vycentrování nevšimli), ale co s ostatními prohlížeči?

Je to snadné. Prvku, který chceme vycentrovat přiřadíme jednodušše:

#stranka {
 	margin-left: auto;
	margin-right: auto;
}

Světe div se, ono to funguje. Není to nic světoborného, ale krásně to ukazuje strasti a slasti CSS. Na jednu stranu logicky funguje nastavení margin na auto, na stranu druhou je nutné vylaborovat, že IE chybně interpretuje text-align a počítat s tím ve vašich CSS souborech.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *