Horizontální vycentrování pomocí CSS
15. 11. 2007 / 11:01 — 551 shlédnutíV kategorii layout
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ář