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

En almindelig CSS-metode til at centrere elementer horisontalt

At centrere elementer med CSS er ikke en triviel sag – de samme legitime CSS-centreringsindstillinger opfører sig forskelligt i forskellige browsere. Lad os starte med at se på nogle almindelige måder at centrere elementer horisontalt i CSS på.

1. Centrering med automatiske margener

Den foretrukne måde at centrere elementer horisontalt i CSS på er at bruge margin-egenskaben—sæt blot margin-venstre og margin-højre egenskaberne til auto. I praksis kan vi skabe en container-div til disse elementer, der skal centreres. En ting at bemærke er, at containerens bredde skal angives:

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

Denne tilgang fungerer meget godt i de fleste større browsere, selv IE6 på Windows kan vises korrekt i sin standard compliance-tilstand. Desværre opnår denne indstilling ikke en centrerende effekt i lavere versioner af IE. Så hvis du vil bruge denne metode i et rigtigt projekt, så sørg for, at brugerens IE-browserversion ikke er lavere end 6.0.

På trods af manglende støtte anbefaler de fleste designere at bruge denne tilgang så meget som muligt. Denne metode anses også for at være den mest korrekte og rimelige af alle metoder til at implementere elementniveaucentrering med CSS.

2. Brug tekstjustering for at opnå centrering

En anden måde at opnå elementcentrering på er at bruge tekst-justeringsegenskaben, sætte værdien af egenskaben til centrering og anvende den på kropselementet. Det er et hack hele vejen igennem, men det er kompatibelt med de fleste browsere, så det er naturligt essentielt i nogle tilfælde.

Det kaldes et hack, fordi denne metode ikke anvender tekstegenskaber på teksten, men på elementet, der er beholderen. Det giver os også ekstra arbejde. Efter at have oprettet de nødvendige divs til layoutet, skal vi anvende tekst-justeringsegenskaben på brødteksten i henhold til følgende kode:

body{ text-align:center; }

Vil der være problemer bagefter? Alle efterkommere af kroppen er centreret.

Derfor skal vi skrive en anden regel for at returnere teksten til standard venstrehåndsjustering:

p{ text-align:left; }

Det er tænkeligt, at denne ekstra regel vil medføre en vis ulejlighed. Desuden ændrer en browser, der virkelig følger standarden, ikke containerens position, men centrerer kun teksten i den.

3. Brug en kombination af automatisk margenjustering og tekstjustering

Fordi tekstjusteringscentreringsmetoden har god bagudkompatibilitet, og den automatiske udfyldningsmetode også understøttes af de fleste moderne browsere, bruger mange designere en kombination af de to for at maksimere tværbrowser-understøttelse af centreringseffekten:

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

Men det er altid et trick, og det er på ingen måde perfekt. Vi skal stadig skrive yderligere regler for teksten i den centrerede beholder, men det ser i det mindste godt ud i forskellige browsere.

4. Negativ ydre margin-løsning

Løsninger med negative marginer er langt fra så simple som at tilføje negative marginer til elementer. Denne metode kræver brug af både absolut positionering og negativ margin-teknikker.

Følgende er den specifikke implementeringsmetode for dette skema. Først skal du oprette en container med centrerede elementer og placere den mindst 50% af sidens venstre kant. På denne måde starter containerens venstre margen ved 50% af sidens bredde.

Sæt derefter containerens venstre margin til halvdelen af den negative containerbredde. Dette vil fastgøre beholderen midt på sidens horisontale retning.

#container{ baggrund:#ffcurl(mid.jpg)repeat-ycenter; Position: absolut; venstre: 50%; bredde: 760px; margin-venstre: -380px; }

Se, ingen hacks! Selvom det ikke er den foretrukne løsning, er det en god måde at gøre det på, og det er meget alsidigt – overraskende nok virker det ikke engang uden problemer i NetscapeNavigator 4.x, ikke? Så hvis du ønsker det bredeste udvalg af browserunderstøttelse, vil denne metode være det bedste valg.