Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Centrering af elementer og tekst i HTML og CSS

Hvordan man centrere elementer i HTML og CSS. Denne artikel omhandler centrering ved brug af ren CSS.

Redigeret: 2016-01-14 04:32

Når man ønsker at centrere et element, så skal man normalt bruge margin egenskaberne i CSS, nærmere bestemt skal left og right egenskaberne sættes til auto. Det kan man nemt gøre ved enten at bruge margin-left og margin-right, eller ved blot at bruge margin egenskaben som vist nedenfor:

div {
  width: 70%;
  margin: 0 auto; /* top right bottom left */
}

For at boksen bliver centreret, skal man dog også angive en bredde (width) på boksen, det skyldes, at div elementet automatisk bliver strukket til at udfylde hele den tilgængelige bredde.

Ved centrering af tekst benytter man text-align egenskaben, som enten kan tilføjes til en ydre boks, eller direkte på det element som indeholder teksten.

body {
  text-align:auto;
}

Hvis man tilføjer text-align direkte til elementet, eksempelvis p elementer på siden, kan dette gøres på følgende måde:

p {
  text-align:center;
}

Centrering af billeder

Centrering via text-align virker også for billeder og andre inline elementer. Hvis man derimod ønsker at bruge margin på et inline element, skal man først angive display til block

span {
  margin: 0 auto;
  display:block;
  width: 300px;
}

Eller for billeder:

img { display:block; margin: 0 auto; }