CSS: Horizontální centrování
Jeden můj kamarád, skautský webmaster, si mi před nedávnem postěžoval, že ta blbá Mozilla neumí vycentrovat blok textu fixní šířky. V IE to prý jde, ale Mozilla či Opera nereagují. Ani v tomto případě kupodivu není viníkem Mozilla, leč nestandardní chování IE. Mějme blok fixní šířky o deklaraci #main {width: 720px;}, který chceme vycentrovat. Lze použít přinejmenším dvě různé […]
Jeden můj kamarád, skautský webmaster, si mi před nedávnem postěžoval, že ta blbá Mozilla neumí vycentrovat blok textu fixní šířky. V IE to prý jde, ale Mozilla či Opera nereagují. Ani v tomto případě kupodivu není viníkem Mozilla, leč nestandardní chování IE.
Mějme blok fixní šířky o deklaraci #main {width: 720px;}, který chceme vycentrovat. Lze použít přinejmenším dvě různé metody, kterými tento blok dostaneme do středu stránky.
Metoda text-align: center
1. možnost je méně elegantní a využívá schopnosti IE vycentrovat blok, jehož nadřazený element má vlastnost text-align: center. Což Mozilla či Opera samozřejmě nechápou, v jejich případě je nutné jít standardní cestou a pravému a levému marginu bloku nastavit hodnotu auto. Deklarace, kterou využívá i tento blog, pak může vypadat například takto:
html, body {text-align: center;}
#main {text-align: left;margin: 0 auto;width: 720px;}
Záporný margin
Podstatně elegantnější metodou, která je využitelná pouze pro centrování elementů pevné šířky, je využití záporné vlastnosti margin. Musíte si při ní však maličko započítat.
Centrovaný blok je třeba absolutně napozicovat do 50% stránky a pak mu nastavit záporný levý okraj o velikosti poloviny centrovaného bloku (jestliže centrovaný element obsahuje padding či border, pak je třeba zahrnout je do výpočtu velikosti levého marginu). A element je uprostřed!
#main {position: absolute;left: 50%;width: 720px;margin-left: -360px}
Komentáře
Myslim, ze nejlepsi reseni je „Metoda text-align: center“, ktere bezne pouzivam v praxi.
Metoda zaporneho marginu chybuje v nekterych prohlizecich a IMHO neni uplne „kosher“.
Negativní margin je IMHO chybný, protože při šířce okna prohlížeče menší než je šířka obsahu bude kus vlevo neviditelný. (Nezkoušel jsem, ale podle specifikace to tak AFAIK bude.)
Negativní margin je IMHO chybný, protože při šířce okna prohlížeče menší než je šířka obsahu bude kus vlevo neviditelný a nebude se na něj dát dostat. (Nezkoušel jsem, ale podle specifikace to tak AFAIK bude.)
že se ptám, proč je ten textalign i u HTML? ne jen Body?
Ten margin je presne to, jak je tady psano. Pokud bude mit web 800 a ja si ho zmensim na 500, cast nebude videt a bude to bez posuvniku. Aspon kdysi jsem to kuli tomu prestal pouzivat :-((
No nevim, jestli je absolutni pozicovani elegantni metoda… Leo