CSS - Sentrering av Elementer

Å sentrere innhold på en nettside er en av de vanligste (og historisk sett mest frustrerende) oppgavene i webutvikling. Hvordan vi gjør det, avhenger av hva slags innhold det er snakk om.

Sentrering av Tekst

Hvis du vil sentrere tekst inne i et element, bruker vi egenskapen text-align. Dette fungerer på all tekst og inline-elementer (som lenker og bilder) inni en beholder.

h1 {
   text-align: center;
 }

Sentrering av Boks-elementer

For å sentrere et helt boks-element (som en <div> eller et bilde) horisontalt på siden, kan vi sette margene på venstre og høyre side til auto.

Krav for at dette skal fungere:

Elementet må oppføre seg som en blokk. For noen elementer, som bilder, må du ofte legge til display: block;.
Elementet må ha en definert bredde (width) for at det skal være noe ledig plass å fordele.

img {
   width: 300px;
   display: block;
   margin-left: auto;
   margin-right: auto;
 }

Tips: Når du setter både venstre og høyre marg til auto, vil nettleseren fordele all ledig plass likt på begge sider. Resultatet er at elementet havner akkurat i midten!