[CSS/DIV] Løser perfekt CSS-side-horisontal sentrering

En vanlig CSS-metode for å sentrere elementer horisontalt

Å sentrere elementer med CSS er ikke en enkel sak – de samme legitime CSS-sentreringsinnstillingene oppfører seg forskjellig i ulike nettlesere. La oss begynne med å se på noen vanlige måter å sentrere elementer horisontalt i CSS på.

1. Sentrering med automatiske marger

Den foretrukne måten å sentrere elementer horisontalt i CSS på er å bruke margin-egenskapen – bare sett margin-venstre og margin-høyre-egenskapene til auto. I praksis kan vi lage en container-div for disse elementene som må sentreres. En ting å merke seg er at bredden på beholderen må spesifiseres:

div#container{ margin-left:auto; margin-høyre:auto; bredde: 168px; }

Denne tilnærmingen fungerer svært godt i de fleste store nettlesere, selv IE6 på Windows kan vises korrekt i sin standard compliance-modus. Dessverre oppnår ikke denne innstillingen noen sentrerende effekt i lavere versjoner av IE. Så hvis du vil bruke denne metoden i et ekte prosjekt, må du sørge for at brukerens IE-nettleserversjon ikke er lavere enn 6.0.

Til tross for manglende støtte anbefaler de fleste designere å bruke denne tilnærmingen så mye som mulig. Denne metoden regnes også som den mest korrekte og fornuftige av alle metoder for å implementere elementnivå-sentrering med CSS.

2. Bruk tekstjustering for å oppnå sentrering

En annen måte å oppnå elementsentrering på er å bruke tekstjusteringsegenskapen, sette verdien av egenskapen til å sentrere og anvende den på kroppselementet. Det er et hack tvers igjennom, men det er kompatibelt med de fleste nettlesere, så det er naturlig nok essensielt i noen tilfeller.

Det kalles en hack fordi denne metoden ikke anvender tekstegenskaper på teksten, men på elementet som er beholderen. Dette gir oss også ekstra arbeid. Etter å ha laget de nødvendige divene for layouten, må vi anvende tekstjusteringsegenskapen på brøddelen i henhold til følgende kode:

body{ text-align:center; }

Vil det bli noen problemer etter det? Alle etterkommere av kroppen er sentrert.

Derfor må vi skrive en annen regel for å returnere teksten til standard venstresidejustering:

p{ text-align:left; }

Det er tenkelig at denne tilleggsregelen vil forårsake en viss ulempe. En nettleser som virkelig følger standarden endrer heller ikke posisjonen til beholderen, men sentrerer bare teksten i den.

3. Bruk en kombinasjon av automatisk marg og tekstjustering

Fordi tekstjusterings-sentreringsmetoden har god bakoverkompatibilitet, og den automatiske utfyllingsmetoden også støttes av de fleste moderne nettlesere, bruker mange designere en kombinasjon av de to for å maksimere tverrnettleserstøtte for sentreringseffekten:

body{ text-align:center; } #container{ margin-left:auto; margin-høyre:auto; kant: 1pxsolidred; bredde: 168px; tekst-align:venstre }

Men dette er alltid et hack, og det er på ingen måte perfekt. Vi må fortsatt skrive flere regler for teksten i den sentrerte beholderen, men i det minste ser det bra ut i ulike nettlesere.

4. Negativ ytre margin-løsning

Løsninger med negative marginer er langt fra så enkle som å legge til negative marginer på elementer. Denne metoden krever bruk av både absolutt posisjonering og negativ margin-teknikk.

Følgende er den spesifikke implementeringsmetoden for dette skjemaet. Først, lag en beholder med sentrerte elementer og plasser den nøyaktig 50 % av venstre kant av siden. På denne måten starter beholderens venstre marg på 50 % av sidens bredde.

Deretter setter du containerens venstre marginverdi til halvparten av den negative containerbredden. Dette vil feste beholderen i midtpunktet av sidens horisontale retning.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; Posisjon: absolutt; venstre: 50 %; bredde: 760px; margin-venstre:-380px; }

Se, ingen hacks! Selv om dette ikke er den foretrukne løsningen, er det en god måte å gjøre det på, og det er veldig allsidig – overraskende nok fungerer det ikke engang i NetscapeNavigator 4.x uten problemer, ikke sant? Så hvis du ønsker det bredeste spekteret av nettleserstøtte, vil denne metoden være det beste valget.