Autocentrering med auto-marginer

Hvis din side har et overordnet element, der omfatter alt indhold på siden, og hvis dette element har en bredde, kan du fordele den overskydende plads ligeligt mellem venstre og højre side ved at sætte de repektive marginbredder til auto.

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 ser nu 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