Autocentrering med negativ margin

Hvis din side har et overordnet element, der omfatter alt indhold på siden, og hvis dette element har en bredde og en absolut position, kan du centrere det vandret ved først rykke det ind på midten (left:50%) og dernæst rykke det til venstre med halvdelen af bredden ved at sætte en negativ margin.

Det er sket på denne side ved at omslutte alt indhold på siden med en
<div id="page">...</div>

Nu ser stylesheet'et for body-elementet og #page-elementet således ud:

body {
  margin:0; padding:0;
  font-family:georgia,arial,sans-serif;
  background-color:rgb(245,245,255);
  color:#000; }
#page {
  width:50em;
  margin:1em auto;}

Værdien auto for både højre og venstre margin for et element med en bredde vil i en moderne browser fordele den tiloversblevne plads i browservinduet ligeligt på højre og venstre side.

Internet Explorer 5 gør ikke dette, men venstrestiller elementet. Ønsker du også centrering i denne browser kan du supplere med følgende formdeklarationer:

body {
  text-align:center;}
#banner, #leftcol, #rightcol, #footer {
  text-align:left;}

Du kan anvende andre længdeenheder på bredden af #page-elementet, for eksempel procenter, hvis du vil have en side, hvor bredden varierer med browservinduets bredde.

Autocentrerings eksempler

Retur til foregående