CSS - centrovanie layoutu

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.

Trochu stručný návod ako na to ale predsa funkčný :-)

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 22.05.2005 15:02

Komentáre

#1 pa3k

00.00.0000 00:00

Pekné, toto je klasická ukážka toho ako jednu chybu v IE využijeme na opravu druhej. Riešenie totiž spočíva vtom, že IE chybne centruje blokové elementy ako keby toli text.

IP adresa: 127.0.0.1

[Reagovať]

#2 admin Web E-mail

00.00.0000 00:00

Presne, tak a ďalej by som si dovolil ešte doplniť, že nepodporuje plno vecí, ktoré by malo podporovať ale radšej si Microsoft vytvoril vlastný štandard resp. si robí čo chce. IE má aj také funkcie, ktoré nemá žiadny iný prehliadač. To je síce chválihodné ale na oplátku mu chýba to čo majú ostatné kvalitné prehliadače ako Opera, Firefox. Nebudem menovať čo lebo sme to všetci vycítili pri optimalizácií stránok a je toho veľa[tongue]

IP adresa: skrytá

[Reagovať]

#3 pjotr Web E-mail

00.00.0000 00:00

V prvom rade IE chýba punc prehliadača. Je to len prezerač html dokumentov, nič viac, nič menej. Som zvedavý na spätnú kompatibilitu IE7 - uff.

IP adresa: 127.0.0.1

[Reagovať]

#4 ImothepH

00.00.0000 00:00

To mám chápať tak že zápis

body {

margin:0;

text-align:center;

}

zarovná layout na stred?

IP adresa: 127.0.0.1

[Reagovať]

#5 admin Web E-mail

00.00.0000 00:00

e to náhrada margin: auto, ktoré IE veľmi nesedí.Takto budeš mať layout zarovnaný len v IE myslím.Potom musíš postupovať podľa zvyšného zdrojáka aby bola stránka zarovnaná na stred v každom browseri[wink].

IP adresa: skrytá

[Reagovať]

#6 Rejpal

23.12.2005 18:50

IE6 margin:auto podporuje, stačí používat standards mode.

IP adresa: 80.188.246.127

[Reagovať]

#7 Shermi E-mail

26.09.2006 12:43

Toto je pekne a co vertikalne? Da sa to tiez nejak takto jednoducho?

IP adresa: 217.73.30.11

[Reagovať]