[CSS/DIV] Perfektně řeší horizontální centrování CSS stránek

Běžná CSS metoda horizontálního centrování prvků

Centrování prvků v CSS není triviální záležitost – stejná legitimní nastavení centrování CSS se v různých prohlížečích chovají odlišně. Začněme tím, že se podíváme na několik běžných způsobů, jak prvky horizontálně centrovat v CSS.

1. Centrování s automatickými okraji

Preferovaný způsob, jak prvky horizontálně centrovat v CSS, je použít vlastnost margin – stačí nastavit vlastnosti margin-levo a margin-right na automatické. V praktickém použití můžeme vytvořit kontejnerový div pro tyto prvky, které je třeba centrovat. Jedna věc, kterou je třeba poznamenat, je, že šířka kontejneru musí být specifikována:

div#container{ margin-left:auto; margin-right:auto; šířka: 168px; }

Tento přístup funguje velmi dobře ve většině hlavních prohlížečů, dokonce i IE6 na Windows se dokáže správně zobrazit ve svém standardním režimu compliance. Bohužel, v nižších verzích IE toto nastavení nedosahuje efektu centrování. Pokud chcete tuto metodu použít v reálném projektu, ujistěte se, že verze prohlížeče IE uživatele není nižší než 6.0.

Navzdory absenci podpory většina designérů doporučuje tento přístup používat co nejvíce. Tato metoda je také považována za nejsprávnější a nejrozumnější ze všech metod implementace centrování na úrovni prvků pomocí CSS.

2. Použijte textové zarovnání pro dosažení centrování

Dalším způsobem, jak dosáhnout centrování elementu, je použít vlastnost text-align, nastavit hodnotu vlastnosti na střed a aplikovat ji na tělový prvek. Je to hack od začátku do konca, ale je kompatibilní s většinou prohlížečů, takže je v některých případech přirozeně nezbytný.

Nazývá se hack, protože tato metoda neaplikuje textové vlastnosti na text, ale na prvek, kterým je kontejner. To nám také přináší další práci. Po vytvoření potřebných divů pro rozložení musíme aplikovat vlastnost text-align na tělo podle následujícího kódu:

body{ text-align:center; }

Budou pak nějaké problémy? Všichni potomci těla jsou uprostřed.

Proto musíme napsat další pravidlo, které vrátí text do výchozího levotočivého zarovnání:

p{ text-align:left; }

Je možné, že toto dodatečné pravidlo způsobí určité nepříjemnosti. Prohlížeč, který skutečně dodržuje standard, nemění pozici kontejneru, ale pouze v něm vycentruje text.

3. Použijte kombinaci automatických okrajů a zarovnání textu

Protože metoda zarovnání textu má dobrou zpětnou kompatibilitu a automatická metoda vycpávky je podporována většinou současných prohlížečů, mnoho návrhářů používá kombinaci obou možností, aby maximalizovali podporu napříč prohlížeči pro efekt centrování:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; Rámec:1pxsolidred; šířka: 168px; text-align:left }

Ale tohle je vždy trik a rozhodně to není dokonalé. Stále musíme napsat další pravidla pro text v prostředovaném kontejneru, ale alespoň to vypadá dobře v různých prohlížečích.

4. Řešení záporné vnější okraje

Řešení záporných marží jsou daleko od toho, aby byla tak jednoduchá jako přidání záporných margin k prvkům. Tato metoda vyžaduje použití jak technik absolutního pozicování, tak záporné margine.

Následuje konkrétní metoda implementace tohoto schématu. Nejprve vytvořte kontejner s prvky vycentrovanými a umístěte ho přesně na 50 % levého okraje stránky. Tímto způsobem levý okraj kontejneru začne na 50 % šířky stránky.

Poté nastavte levou okrajovou hodnotu kontejneru na polovinu záporné šířky kontejneru. Tím se kontejner ustálí uprostřed horizontálního směru stránky.

#container{ pozadí:#ffcurl(mid.jpg)repeat-ycenter; pozice: absolutní; levá: 50 %; šířka: 760px; margin-left:-380px; }

Podívejte, žádné hacky! I když to není preferované řešení, je to dobrý způsob, jak to udělat, a je velmi univerzální – překvapivě to ani v NetscapeNavigator 4.x nefunguje bez problémů, že? Pokud tedy chcete co nejširší škálu podpory prohlížečů, pak bude tato metoda nejlepší volbou.