Vycentrování obsahu stránky

Ačkoli už jsem popisoval, jak udělat levé menu nebo jak na pozicovaný design, jedna otázka se pořád opakuje a totiž "jak udělat centrovanou stránku". Dříve to byla otázka složitá (muselo se hackovat) a ještě předtím nepotřebná (monitory byly velmi úzké, takže se četlo od kraje do kraje). Dnes (2010) je centrování stránky relativně snadné.

Margin-left: auto; margin-right: auto;

Celý trik spočítá v tom, že se celá stránka uzavře do obalovacího tagu <div> a tomuto tagu se nastaví šířka a automatické okraje. Asi takhle:

<body>
    <div style="width: 800px; margin-left: auto; margin-right: auto;">
        ... celá, jakkoli složitá stránka
    </div>
</body>

To je celé kouzlo a v následujícím textu už se budu zabývat pouze jeho výkladem, přepisem a použitím.

Výklad zápisu

Napřed co znamená to

margin-left: auto; margin-right: auto;

Znamená to, že levý a pravý okraj budou "automatické". Hodnota auto u CSS vlastnosti margin znamená, že se prohlížeč pokusí vyrovnat okraj tak, aby protilehlé strany měly okraj (margin) stejně široký.

Když tedy vkládám celou stránku do divu s nastavenými okraji na auto, říkám prohlížeči, že s celým obsahem stránky má šoupnout tak, aby na levém i na pravém okraji bylo stejné místo. Což neznamená nic jiného než to, že se vycentruje.

Nastavení šířky

V předchozím příkladu jste si určitě všimli, že obalovacímu divu nastavuji šířku 800 pixelů. Tuto šířku si můžete nastavit jinak, třeba 1000 nebo kolik potřebujete.

Nějaká šířka se tomu divu ale nastavit musí. Proč? Protože kdyby se nenastavila šířka, tak div bude mít výchozí šířku, což je 100 procent. Když má ale něco šířku 100 procent, pak nezbude žádné místo na automatické okraje, které dělají to vycentrování.

V praxi se tedy zvolí nějaká šířka v pixelech (výjimečně v jiných jednotkách), o které se předpokládá, že se do ní obsah vejde (nebo do které se musí vejít reklamní banner). Já osobně doporučuji navrhovat stránku od 550 do 900 pixelů, ale třeba zpravodajské servery jedou běžně na 1024 (to je šířka nejběžnějších starých monitorů).

V případě, kdy bude okno čtenářova prohlížeče užší než nastavená šířka obsahu, na automatické okraje žádné místo nezbude. To je ale zřejmě žádoucí chování. Stránka pak bude nalepená na levý okraj okna a dole se objeví horizontální scrollbar. (Komu scrollbar vadí, může si pohrát s nastavením vlastnosti max-width namísto width, teoreticky by to mělo fungovat)

Nastavením šířky se vyhradí oblast obsahu, ve kterém se dá dělat tak zvaný pixel-top design, tedy vzhled stránky, který není závislý na šířce okna nebo použitém zařízení. To je pro návrh vzhledu velmi pohodlné.

Detaily

Proč div

Tag <div> je na obalení celé stránky asi nejlepší. Je to tag určený přímo k obalování a může obsahovat cokoliv.

Když se pokusíte pro stejný účel použít tag <body>, tak se to v některých prohlížečích nemusí vydařit, protože tagu body někdy nelze nastavit šířku (má šířku okna).

V případě potřeby se dá obalovacích divů použít víc systémem matrjoška. Dost často se to dělá, když se v oblasti automatických okrajů vykreslují nějaká pozadí.

Jiné způsoby zápisu margin

Občas se můžete setkat se zápisem centrování zkráceným zápisem:

margin: 0px auto;

To je zkratka pro situaci, kdy chci vertikální okraje nulové (horní a dolní) a horizontální okraje automatické (levý a pravý). Je to tedy to samé, co zápis

margin-left: auto; margin-right: auto;

Já používám raději ten kratší zápis. Kdo to nechápe a chce pochopit, nastuduje si zadávání stran v CSS.

Okraje stránky

Když si s tím budete hrát, přijdete na to, že vystředěný div v některých případech nepasuje přímo k okrajům okna prohlížeče. To je ve skutečnosti způsobeno výchozími okraji prvku <body>. Takže doporučuju do stylopisu připsat

body {margin: 0px;}

Centrování ne na střed

Když jsem kódoval stránky o Krétě, chtěl jsem je centrovat nikoli na střed, ale nějak jako na zlatý řez. Ono to na zlatý řez tedy nejde, ale trochu asymetricky to jde. Vyřešil jsem to tak, že jsem nad obalovací div umístil ještě jeden obalovací div a tomu jsem nastavil šířku 90%. Když je pak okno široké, obsah se centruje trochu nalevo od středu. Když je naopak okno úzké, nevzniká dlouho rolovací pruh:

<div style="width: 90%;">
<div style="margin: 0px auto; width: 570px;">
obsah stránky
</div>
</div>

Centrování odstavců

Jenom pro pořádek zmiňuji, že odstavce se centrují CSS vlastností text-align. Vystředění odstavce se tedy provede takto:

<p style="text-align: center;">obsah odstavce</p>

Quirk mód

Pokud vám uvedené příklady nefungují, je možné, že je zobrazujete v Exploreru ve Quirk módu, ať už nevědomky nebo záměrně. Já osobně doporučuji pracovat ve standardním módu. Do standardního módu se stránka přepne, když se na začátek kódu před tag body dá nějaké standardní doctype, například

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Už jsem to na tomto webu popisoval mockrát, takže si prosím nastudujte módy prohlížečů (a jestli je nechcete studovat, tak si prostě na začátek kódu dejte ten doctype a neřešte to).

Kód pro quirk mód

Kdo kóduje v quirk módu záměrně, musí centrovaný design v Internet Exploreru vytvářet starším a komplikovanějším postupem s využitím kombinace margin: auto a text-align: center. Nechce se mi to tady popisovat, tak se omezím na kód. Nějaký výklad najdete v příkladech u vlastnosti margin.

<div style="text-align: center;">
 <div style="text-align: left; width: 400px; margin: 0px auto;">
  nějaký vystředěný obsah
 </div>
</div>

Ještě jednou připomínám, že tento kód už nedoporučuji (psáno 2010). Já ho občas používám, když píšu text ve FrontPage, protože FrontPage používá staré vykreslovací jádro.

Staré centrování tabulky

Jó, to byly časy. Když jsem prvně přišel do Seznamu, tak ještě byla hlavní stránka centrována touto konstrukcí:

<table align="center">
<tr><td>
obsah stránky
</td></tr></table>

a věřte nebo ne, ono to fungovalo. A funguje to možná dodnes, akorát je to děsná prasárna. V té době ještě podpora CSS nebyla nic moc, tak jsem hlavní stránku Seznamu nechal v tabulce až do roku 2004, než mě odveleli na Novinky. Prostě celá stránka zavřená do tabulky a ta tabulka má nastaven nestandardní atribut align s naprosto šílenou hodnotou, která necentruje její obsah (což by bylo normální chování), ale samotnou tabulku.

Kdo chce dneska vycentrovat tabulku, může použít tentýž postup doporučovaný touto stránkou, akorát není potřeba nastavovat šířku, protože tabulka si ho spočítá podle svého obsahu:

<table style="margin-right: auto; margin-left: auto;">

Pozicování v obsahu

Potom uvnitř toho obsahu s nastavenou šířkou (např. 800px) můžete dělat cokoliv, například obtékání nebo rámečky nebo prostě cokoliv. Jestli ale chcete používat pozicované prvky (ty já mám rád), je potřeba kód ještě malinko upravit:

<div style="width: 800px; margin-left: auto; margin-right: auto; position: relative;">
libovolný obsah
</div>

Od téhle chvíle se může v obsahu objevit prvek s nastavenou absolutní pozicí. Nastavení relativní pozice obalovacímu divu (zápisem position: relative;) způsobí, že levý horní roh tohoto obalovacího divu bude brán jako nový počátek souřadného systému, ve kterém se vyskytují pozicované prvky.

Samotné nastavení position: relative nemá na obalovací div žádný viditelný vliv. Takže nic nezkazíte, když tam to position: relative; budete psát vždycky, i když ve stránce pozicovat nebudete.

Jednou z výhodou pozicovaných prvků je to, že se takto lze dostat i mimo okraj obalovacího divu. To mají rádi hlavně zadavatelé reklamy, protože takhle mohou stránku po stranách oblepit bannery (většinou skyscrapery).

Přepis kódu

V předchozích příkladech jsem používal srozumitelný, ale těžkopádný přímý zápis stylů pomocí atributu style="..". Je čas to přepsat do stylopisu s ídéčkem. Obalovací div jsem nazval "obalovaci":

<!DOCTYPE html>
<html>
<head>
...
<style>
#obalovaci {
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    position: relative;
}
body {margin: 0px;}
</style>
</head>

<body>
    <div id="obalovaci">
        libovolný obsah
        ...
    </div>
</body>
</html>

Nakonec dva živé příklady:

Příklad vystředěné stránky

Příklad vystředěné stránky pro starší Internet Explorer

Ach jo, tuhle stránku jsem měl napsat už před šesti lety. Ušetřil bych tolik dotazů sobě i do diskuse!

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.