[CSS/DIV] Löser perfekt CSS-sidens horisontella centrering

En vanlig CSS-metod för att centrera element horisontellt

Att centrera element med CSS är inte en enkel sak – samma legitima CSS-centreringsinställningar beter sig olika i olika webbläsare. Låt oss börja med att titta på några vanliga sätt att centrera element horisontellt i CSS.

1. Centrering med automatiska marginaler

Det föredragna sättet att centrera element horisontellt i CSS är att använda marginalegenskapen – bara sätt margin-vänster och margin-höger egenskaper till auto. I praktiken kan vi skapa en container-div för dessa element som behöver centreras. En sak att notera är att behållarens bredd måste specificeras:

div#container{ margin-left:auto; margin-höger:auto; bredd: 168px; }

Denna metod fungerar mycket bra i de flesta stora webbläsare, även IE6 på Windows kan visas korrekt i sitt standardefterlevnadsläge. Tyvärr uppnår denna inställning i lägre versioner av IE ingen centreringseffekt. Så om du vill använda denna metod i ett riktigt projekt, se då till att användarens IE-webbläsarversion inte är lägre än 6.0.

Trots bristen på stöd rekommenderar de flesta designers att använda detta tillvägagångssätt så mycket som möjligt. Denna metod anses också vara den mest korrekta och rimliga av alla metoder för att implementera elementnivåcentrering med CSS.

2. Använd textjustering för att uppnå centrering

Ett annat sätt att uppnå elementcentrering är att använda text-aligning-egenskapen, sätta värdet på egenskapen till centrering och applicera det på kroppselementet. Det är en hack rakt igenom, men det är kompatibelt med de flesta webbläsare, så det är naturligtvis nödvändigt i vissa fall.

Det kallas en hack eftersom denna metod inte tillämpar textegenskaper på texten, utan på elementet som är containern. Detta ger oss också extra arbete. Efter att ha skapat nödvändiga divs för layouten behöver vi tillämpa text-aligning-egenskapen på brödtexten enligt följande kod:

body{ text-align:center; }

Kommer det att bli några problem efter det? Alla ättlingar till kroppen är centrerade.

Därför behöver vi skriva en annan regel för att återställa texten till standardjusteringen på vänster sida:

p{ text-align:left; }

Det är tänkbart att denna tilläggsregel kommer att orsaka viss olägenhet. Dessutom ändrar en webbläsare som verkligen följer standarden inte containerns position, utan centrerar bara texten i den.

3. Använd en kombination av automatiska marginaler och textjustering

Eftersom metoden för att centrera textjustering har god bakåtkompatibilitet, och den automatiska utfyllningsmetoden också stöds av de flesta samtida webbläsare, använder många designers en kombination av de två för att maximera stöd för centereringseffekten över webbläsare:

body{ text-align:center; } #container{ margin-left:auto; margin-höger:auto; ram:1pxsolidred; bredd: 168px; text-align:left }

Men det här är alltid en hack, och det är inte perfekt på något sätt. Vi behöver fortfarande skriva ytterligare regler för texten i den centrerade containern, men åtminstone ser det bra ut i olika webbläsare.

4. Negativ yttre marginallösning

Lösningar för negativa marginaler är långt ifrån så enkla som att lägga till negativa marginaler på element. Denna metod kräver användning av både absolut positionering och negativ marginal.

Följande är den specifika implementeringsmetoden för detta schema. Skapa först en container med centrerade element och placera den exakt 50 % av sidans vänstra kant. På så sätt börjar containerns vänstra marginal vid 50 % av sidans bredd.

Sätt sedan behållarens vänstra marginalvärde till hälften av den negativa behållarens bredd. Detta kommer att fixera behållaren vid mittpunkten av sidans horisontella riktning.

#container{ bakgrund:#ffcurl(mid.jpg)repeat-ycenter; Position: absolut; vänster: 50%; bredd: 760 px; margin-left:-380px; }

Titta, inga hacks! Även om detta inte är den föredragna lösningen, är det ett bra sätt att göra det på, och det är mycket mångsidigt – förvånansvärt nog fungerar det inte ens i NetscapeNavigator 4.x utan problem, eller hur? Så om du vill ha det bredaste utbudet av webbläsarstöd är denna metod det bästa valet.