Rozlišení monitorů roste (viz tabulka z návštěvnosti těchto www stránek). Chcete vědět jak jednoduše vycentrovat www stránku aby se korektně zobrazovala na každém monitoru?
1 1280 x 1024 pixelů 44,17%
2 1024 x 768 pixelů 19,17%
3 1600 x 1200 pixelů nebo větší 17,50%
4 1400 x 1050 pixelů 6,67%
5 800 x 600 pixelů 5,83%
6 1152 x 864 pixelů 5,00%
7 nezjištěno 1,67%
V css existuje mnoho cest jak dosáhnou stejného cíle. Neexistuje jeden správný způsob řešení. Pokud chcete vycentrovat www stránky, tady je jednoduchý způsob jak to udělat. Tento postup používám já, snad vám pomůže a ušetří hodiny hledání a zkoušení.
Zdrojový kód stránky:
<body>
<div id=“telo“>
<h1>
</h1>
<p>
</p>
</div>
</body>
Hlavní div s id=telo je ten, který chceme vycentrovat. Vycentrování provedeme jednoduše tak, že mu nastavíme libovolnou šířku (doporučuji max 800 px) a okraje nastavíme v horizontálním směru na hodnotu auto.
CSS:
#telo {
width: 780px;
margin: 0 auto;
}
S vycentrováním
Bez vycentrování
Tento postup nefunguje v prohlížečích IE 5.x a 6. Internet explorer má nesprávně implementovanou vlastnost text-align, pomocí které zarovnává nejen řádkové ale i blokové prvky. A protože jsou tyto prohlížeče stále hojně využívány, kód bude vypadat takto:
body {
text-align:center;
}
#telo {
width: 780px;
margin: 0 auto;
text-align: left;
}
Tabulka z návštěvnosti těchto stránek – použití prohlížečů:
1 Mozilla Firefox 3.0.8 23,33%
2 MS Internet Explorer (Win) 6.0 SV1 20,83%
3 Windows Internet Explorer 7.0 19,17%
4 Google Chrome 1.0.x 18,33%
5 Neurčené prohlížeče 4,17%
6 Opera 9.64 5 4,17%
7 MS Internet Explorer (Win) 6.0 2,50%
8 Windows Internet Explorer 8.0 1,67%
9 Google Chrome 2.0.x (vývojová) 0,83%
10 Mozilla Firefox 1.5.0.9 0,83%
11 Mozilla Firefox 2.0.0.20 0,83%
12 Mozilla Firefox 2.0.0.6 0,83%
13 Mozilla Firefox 2.0.0.x (Gecko 1.9) 1 0,83%
14 Opera 9.25 0,83%
15 SeaMonkey 1.1.11 0,83%
Pro Netscape 6 musíme ještě nastavit min-width. Proč? Pokud se totiž zmenší šířka okna tohoto prohlížeče pod hranici šířky našeho vycentrovaného div, nezobrazí se část obrazovky a nezobrazí se ani rolovací lišty. Aby se rolovací lišty zobrazily, kód bude vypadat takto:
Do body přidáme…
body{
text-align: center;
min-width: 780px;
}
Šířka min-width musí být rovna nebo o něco málo větší než prvek div.
Na závěr
Nejsem Pixy a nechci nikoho učit CSS. Sám mám velké mezery, které se snažím zacelit. Na těchto stránkách chci pouze nabídnout pomocnou ruku začínajícím nadšencům.
Mino AD napsal:
Aha, to je akoze pre tych co nemaju google, right?
Prespic napsal odpověď Mino AD:
Google je od toho aby našel takovéhle stránky. Tvoje logika postrádá logiku! 😀
MareceK napsal:
Mas to zle… tak ako to je je ten div zbytocny… stacy hodit style na body… a este mas strasny font na stranke… a uz sa mi nechce pisat..
Jaro napsal:
Ten 1 div zbytocny byt nemusi, ak by chcel napr. dat pozadie pre body. Ale v kazdom pripade je zbytocna cela ta stranka.
Ducky napsal:
Ach jo, zamyslím se a asi stránku smažu.
Anežka napsala:
Opovažte se tu stránku mazat, jestli máte nějakej monitoring na vyhledávaný fráze, jistě Vám neujde, kolik lidí tuhle radu hledá.
Prespic napsal:
Rozhodně se zamítá něco mazat 😀
Rozhodně potěší, když zadáte do google \“IE vycentrovat stranku\“ a jako prvni odkaz vam najde přehledný web na kterém je pěkně a jednoduše napsáno řešení.
Přeji hodně zdaru 🙂