CSS Sentrering - moro for alle!

Popular web design and developlment pages & tutorials translated into Norwegian

Norwegian translation of Russ Weakley's article “CSS Centering - fun for all!”. Please note: this page is a Norwegian translation of Russ Weakley's article on CSS Centering, located here: CSS Centering - fun for all!. Vennligst bemerk: denne siden er en norsk oversettelse av Russ Weakley sin artikkel om CSS Sentrering, beliggende her: CSS Centering - fun for all!

Sentrering av blokk element

Hvordan sentrerer man blokk element ved hjelp av CSS? Det finnes hovedsakelig to metoder og man bør velge mellom de to basert på om sideoppsettet er dynamisk (vil forandre størrelse, avhengig av størrelsen på nettleservinduet) eller har en fast bredde.

Sentrering av dynamiske oppsett

Dynamiske oppsett er enkle å sentrere ved bruk av marginer på hver side av boksen som skal sentreres. Marginene kan settes med em, pixel eller prosentandel enheter.

div # container {
	margin-left: 10%;
	margin-right: 10%;
}

Sentrering av faste oppsett

Teoretisk sett skal du kunne bruke auto marginer på venstre og høyre av blokken og dette bør sentrere boksen på siden.

I W3C Visuell formatting model (Visual formatering modellen) står det: "Hvis både 'margin-left og margin-right" er "auto", blir begge verdiene like. Dette sentrerer elementet horisontalt med hensyn til kantene av blokken som den ligger i.

Blokk element i faste oppsett bør derfor kunne sentreres med følgende regler:

div # container {
	margin-left: auto;
	margin-right: auto;
	width: 50em;
}

Dessverre sentrerer ikke enkelte nettlesere blokk som bruker denne metoden fordi de ignorerer auto marginer. Disse nettleserne inkluderer:

Ved å tillegge to enkle regler kan dette problemet overvinnes i alle nettleserne nevnt ovenfor, unntatt NN4.

1. Sentrer body

Mens disse nettleserne ignorere auto marginer, vil de følge "text-align: center". Hvis dette brukes på selve <body>en sentreres blokken som forventet. En ny regel er derfor lagt inn:

body {
	text-align: center;
}

div # container {
	margin-left: auto;
	margin-right: auto;
	width: 50em;
}

2. Tilbakestille text-align

Det eneste problemet med denne nye regelen er at alt innholdet på siden er nå også sentrert på midten av blokken. For å overvinne dette problemet legger man inn en ny erklæring til blokken sitt regelsett - "text-align: left". Den endelige CSS-koden blir:

body {
	text-align: center;
}

div # container {
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: left;
}

Se resultatene

Den første eksempelsiden viser blokken sentrert på midten av en side som bruker auto marginer, men ikke sentrering av body elementet.

Den andre eksempelsiden viser blokken sentrert på midten av en side som bruker auto marginer, men også har sentrering av tekst på boy elementet, og "text-align: left" på selve blokken som sentreres.