[CSS/DIV] Perfektne rieši horizontálne centrovanie stránky v CSS

Bežná CSS metóda horizontálneho centrovania prvkov

Centrovanie prvkov v CSS nie je triviálna záležitosť – rovnaké legitímne nastavenia centrovania CSS sa v rôznych prehliadačoch správajú odlišne. Začnime pohľadom na niekoľko bežných spôsobov, ako horizontálne centrovať prvky v CSS.

1. Centrovanie s automatickými okrajmi

Preferovaný spôsob, ako centrovať prvky horizontálne v CSS, je použiť vlastnosť margin – stačí nastaviť vlastnosti margin-left a margin-right na auto. V praktickom použití môžeme vytvoriť kontajnerový div pre tieto prvky, ktoré je potrebné centrovať. Jedna vec, ktorú treba poznamenať, je, že šírka kontajnera musí byť špecifikovaná:

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

Tento prístup funguje veľmi dobre vo väčšine hlavných prehliadačov, dokonca aj IE6 na Windows dokáže správne zobrazovať v štandardnom režime dodržiavania predpisov. Bohužiaľ, v nižších verziách IE toto nastavenie nedosahuje efekt centrovania. Ak chcete túto metódu použiť v reálnom projekte, uistite sa, že verzia prehliadača IE nie je nižšia ako 6.0.

Napriek nedostatku podpory väčšina dizajnérov odporúča tento prístup používať čo najviac. Táto metóda je tiež považovaná za najsprávnejšiu a najrozumnejšiu zo všetkých metód implementácie centrovania na úrovni prvkov pomocou CSS.

2. Použite textové zarovnanie na dosiahnutie centrovania

Ďalším spôsobom, ako dosiahnuť centrovanie elementu, je použiť vlastnosť text-align, nastaviť hodnotu vlastnosti na stred a aplikovať ju na prvok tela. Je to hack od začiatku do konca, ale je kompatibilný s väčšinou prehliadačov, takže je v niektorých prípadoch prirodzene nevyhnutný.

Nazýva sa hack, pretože táto metóda neaplikuje vlastnosti textu na text, ale na prvok, ktorý je kontajnerom. To nám tiež prináša extra prácu. Po vytvorení potrebných divov pre rozloženie musíme aplikovať vlastnosť text-align na telo podľa nasledujúceho kódu:

body{ text-align:center; }

Budú potom nejaké problémy? Všetci potomkovia tela sú v strede.

Preto musíme napísať ďalšie pravidlo, ktoré vráti text do predvoleného ľavého zarovnania:

p{ text-align:left; }

Je možné, že toto dodatočné pravidlo spôsobí určité nepríjemnosti. Prehliadač, ktorý skutočne dodržiava štandard, nemení pozíciu kontajnera, ale iba vycentruje text v ňom.

3. Použite kombináciu automatických okrajov a zarovnania textu

Keďže metóda centrovania zarovnania textu má dobrú spätnú kompatibilitu a automatická metóda vypĺňania je podporovaná aj väčšinou súčasných prehliadačov, mnohí dizajnéri používajú kombináciu oboch na maximalizáciu podpory naprieč prehliadačmi pre efekt centrovania:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; okraj:1pxsolidred; šírka: 168px; text-align:left }

Ale toto je vždy trik a rozhodne nie je dokonalý. Stále potrebujeme napísať ďalšie pravidlá pre text v stredovom kontajneri, ale aspoň to vyzerá dobre v rôznych prehliadačoch.

4. Riešenie záporného vonkajšieho okraja

Riešenia záporných marží sú ďaleko od toho, aby boli také jednoduché ako pridávanie záporných margin k prvkom. Táto metóda vyžaduje použitie techniky absolútneho polohovania aj záporného okraja.

Nasleduje konkrétna metóda implementácie tohto systému. Najprv vytvorte kontajner so stredovými prvkami a umiestnite ho presne na 50 % ľavého okraja stránky. Týmto spôsobom ľavý okraj kontajnera začne na 50 % šírky stránky.

Potom nastavte hodnotu ľavého okraja kontajnera na polovicu zápornej šírky kontajnera. Týmto sa kontajner ustáli v strede horizontálneho smeru stránky.

#container{ pozadie:#ffcurl(mid.jpg)repeat-ycenter; pozícia: absolútna; vľavo: 50 %; šírka: 760px; Okraj-ľavo: -380px; }

Pozrite, žiadne hacky! Aj keď to nie je preferované riešenie, je to dobrý spôsob, ako to urobiť, a je to veľmi univerzálne – prekvapivo, že to ani v NetscapeNavigator 4.x nefunguje bez problémov, však? Ak teda chcete najširšiu škálu podpory prehliadačov, táto metóda bude najlepšou voľbou.