Centrering i CSS

For at få centrering til at fungere, skal du først give dit element en bredde, eller en max-bredde. Dette gøres henholdsvist ved brugen af width og max-width egenskaberne. Derefter skal du angive margin:auto; for elementet.

#Basement {max-width:90%;margin:auto;}

I ovenstående eksempel angiver vi alle margins på en gang. Men da det er kun venstre og højre margin der skal have en værdi af auto, betyder det at du frit kan angive en top og bund margin, som vist i følgende eksempel.

#Basement {width:90%;margin:1em auto 1em;}

Der er også nogen som angiver det på følgende måde i stedet:

#Basement {width:90%;margin-left:auto;margin-right:auto;}

Den første er nemmere at skrive, og spare samtidig lidt fil-størrelse. Den sidste er bare nemmere at læse for begyndere og uøvede.

Bemærk. Når man benytter den korte udgave, så angives margin som: Top|Højre|Bund|Venstre. Jeg tilføjede ikke en angivelse for venstre, da angivelsen fra Højre automatisk bliver brugt, når man har angivet en værdi for højre.

Ældre versioner af Internet Explorer

Når vi snakker ældre versioner af Internet Explorer, så tænker vi ofte mest på IE6. Hvis du har problemer med at få ovenstående til at fungere, så prøv at angive text-align til center for forældre elementet.

Hvis vi siger at elementet med Basement som ID, er det første element efter body, som en slags kontainer til resten af sidens indhold, så skal body altså have angivet en text-align til center.

body {
  text-align:auto;
}
#Basement {
  width:90%;
  max-width:1600px;
  margin:auto;
}

Det er fordi der er en fejl i visse gamle browsere, som tilføjer text-align til almindelige elementer, selvom det kun skal virke for tekst.