[CSS/DIV] Popolnoma reši horizontalno centriranje strani CSS

Pogosta CSS metoda za horizontalno centriranje elementov

Centriranje elementov s CSS ni preprosta zadeva – iste legitimne nastavitve centriranja CSS se v različnih brskalnikih obnašajo različno. Začnimo z nekaj pogostimi načini horizontalnega centriranja elementov v CSS.

1. Centriranje z avtomatskimi robovi

Priporočljiv način za horizontalno centriranje elementov v CSS je uporaba lastnosti roba—preprosto nastavite lastnosti rob-levo in rob-desno na avtomatsko. V praksi lahko ustvarimo kontejnerski div za te elemente, ki jih je treba centrirati. Pomembno je vedeti, da je treba določiti širino vsebnika:

div#container{ margin-left:auto; rob-desno:auto; širina: 168px; }

Ta pristop zelo dobro deluje v večini večjih brskalnikov, celo IE6 na Windows lahko pravilno prikaže v svojem standardnem načinu skladnosti. Na žalost v nižjih različicah IE ta nastavitev ne doseže učinka centriranja. Če želite to metodo uporabiti v resničnem projektu, poskrbite, da različica brskalnika IE uporabnika ni nižja od 6.0.

Kljub pomanjkanju podpore večina oblikovalcev priporoča čim večjo uporabo tega pristopa. Ta metoda velja tudi za najbolj pravilno in razumno med vsemi metodami implementacije centriranja na ravni elementov s CSS.

2. Uporabite poravnavo besedila za dosego centriranja

Drug način za dosego centriranja elementa je uporaba lastnosti poravnave besedila, nastavitev vrednosti lastnosti na center in uporaba na element telesa. Gre za popoln vdor, a je združljiv z večino brskalnikov, zato je v nekaterih primerih naravno nujen.

Imenuje se hack, ker ta metoda ne dodeli lastnosti besedila besedilu, temveč elementu, ki je kontejner. To nam prinese tudi dodatno delo. Po ustvarjanju potrebnih divov za postavitev moramo lastnost text-align na telo uporabiti v skladu z naslednjo kodo:

body{ text-align:center; }

Ali bodo po tem kakšne težave? Vsi potomci telesa so v središču.

Zato moramo napisati še eno pravilo, da se besedilo vrne v privzeto levo poravnavo:

p{ text-align:left; }

Možno je, da bo to dodatno pravilo povzročilo nekaj nevšečnosti. Poleg tega brskalnik, ki resnično sledi standardu, ne spremeni položaja vsebnika, ampak le centrira besedilo v njem.

3. Uporabite kombinacijo samodejnih robov in poravnave besedila

Ker ima metoda poravnave besedila dobro združljivost za nazaj in je metoda samodejnega polnjenja podprta tudi v večini sodobnih brskalnikov, mnogi oblikovalci uporabljajo kombinacijo obeh, da maksimirajo podporo za učinek centriranja med brskalniki:

body{ text-align:center; } #container{ margin-left:auto; rob-desno:auto; rob:1pxsolidred; širina: 168px; text-align:left }

A to je vedno trik in ni popoln v nobenem primeru. Še vedno moramo napisati dodatna pravila za besedilo v osrednjem vsebniku, a vsaj izgleda dobro v različnih brskalnikih.

4. Rešitev negativnega zunanjega roba

Rešitve z negativnimi robovi so daleč od tega, da bi bile tako preproste kot dodajanje negativnih robov elementom. Ta metoda zahteva uporabo tako absolutnega pozicioniranja kot tehnike negativnega roba.

Spodaj je prikazan specifičen način izvedbe te sheme. Najprej ustvarite posodo s sredinskimi elementi in jo postavite natančno na 50 % levega roba strani. Na ta način se levi rob kontejnerja začne pri 50 % širine strani.

Nato nastavite levo vrednost roba kontejnerja na polovico negativne širine vsebnika. To bo določilo posodo na sredini vodoravne smeri strani.

#container{ ozadje:#ffcurl(mid.jpg)repeat-ycenter; položaj: absoluten; levo: 50 %; širina: 760px; margin-left:-380px; }

Poglejte, brez hekov! Čeprav to ni najboljša rešitev, je dober način in je zelo vsestranska – presenetljivo je, da niti v NetscapeNavigatorju 4.x ne deluje brez težav, kajne? Torej, če želite najširši nabor podpore brskalnikov, je ta metoda najboljša izbira.