Neviete ako centrovať CSS layout na stred stránky? Alebo neviete ako to urobiť, tak aby to išlo aj v prehliadačí MSIE? Prečítajte si tento krátky návod.
Určite ste už rozmýšlali nad tým ako vycentrovať layout, ktorý je beztabuľkový. Nebol by v tom problém kebyže MSIE podporuje margin: auto. Na podobné veci si určite zvyknúť treba, pretože to nieje jediné čo IE nepodporuje. Aby som prešiel k veci, tak postavím jednoduchý layout, ktorý bude centrovaný na stred stránky. Kód k layoutu nájdete tu.
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta name="autor" content="PaBi3" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<style>
body { margin: 0; text-align: center; }
.main { width: 700px; height: 300px; border: 1px solid #000000; margin: auto; text-align: left; }
</style>
<title>Stránka</title>
</head>
<body>
<div class="main">
Obsah stránky
</div>
</body>
</html>
Pozíciu stránky som zvýraznil borderom aby ste videli, že sa centruje na stred.
Udal som jej aj rozmery. Stránka bude teraz umiestnená v strede okna prehliadača.
Text-align: left sme použili s dôvodu zarovnania textu doľava, pretože inak
by sa necentrovala na stred len stránka ale aj text. Je mnoho spôsobov ako
stránku vycentrovať pomocou margin: auto ale MSIE nepodporuje túto funkciu a tak
musíme zostať pri podobnom spôsobe aký je uvedený tu. Ukážka tu.