Hvordan sentrere skrift og innhold med HTML og CSS

Vil du sentrere skrift eller annet innhold på nettsiden din? Da er du på rett sted. Den gamle måten – HTML-taggen <center> – fungerer fortsatt i mange nettlesere, men den er utdatert og bør ikke lenger brukes. I denne guiden får du de moderne og riktige måtene å sentrere tekst, bilder og bokser på med CSS, med ferdige kodeeksempler du kan kopiere rett inn.

Vi forklarer hver metode fra bunnen av, slik at du skjønner hvorfor den virker – ikke bare hva du skal lime inn. Underveis finner du en sammenligningstabell over alle metodene og svar på de vanligste spørsmålene nybegynnere stiller.

Kan du fortsatt bruke <center>-taggen?

Kort svar: ja, de fleste nettlesere viser fortsatt innhold mellom <center> og </center> midtstilt – men du bør la være å bruke taggen. Den er offisielt utdatert, og nye nettsider skal sentrere med CSS i stedet.

Slik så den gamle koden ut:

<center>Denne teksten blir sentrert mellom center-taggene</center>

Problemet er at <center> blander sammen innhold og utseende. En av grunnreglene i moderne nettutvikling er at HTML skal beskrive hva noe er, mens CSS (stilarket) skal bestemme hvordan det ser ut. Vil du lære mer om skillet, har vi en egen artikkel om hva CSS er og hvorfor det har tatt over oppgaven med formatering.

Når ble center-taggen utdatert?

Taggen ble merket som «deprecated» (frarådet) allerede i HTML 4.01, og i HTML5 er den klassifisert som «obsolete» (foreldet). I praksis betyr det to ting: nettleserne kan fjerne støtten når som helst, og en HTML-validator vil gi deg feilmeldingen «The center element is obsolete. Use CSS instead.» Det samme gjelder det gamle attributtet align="center", som også regnes som utdatert.

Hva bør du bruke i stedet?

Alt <center> gjorde, og mye mer, løses i dag med CSS. Hvilken CSS-egenskap du velger avhenger av hva du vil sentrere og i hvilken retning:

• Tekst og inline-innhold vannrett: text-align: center
• En boks med fast bredde vannrett: margin: 0 auto
• Alt innhold, både vannrett og loddrett: flexbox eller CSS grid

De neste avsnittene tar for seg hver metode i tur og orden.

Slik sentrerer du tekst med text-align

text-align: center er den enkleste og vanligste måten å sentrere skrift på. Egenskapen sentrerer all tekst og alt «inline»-innhold (som lenker og ikoner) inne i det elementet du setter den på – typisk et avsnitt, en overskrift eller en div.

Du kan skrive stilen rett i taggen (kalt inline-stil):

<p style="text-align: center;">Denne teksten er midtstilt</p>

Eller – som er den ryddige måten – i stilarket ditt eller i en <style>-blokk:

.midtstilt {
  text-align: center;
}

Deretter gir du elementet klassen:

<p class="midtstilt">Denne teksten er midtstilt</p>

Sentrere overskrifter

Samme egenskap fungerer på overskrifter. Vil du midtstille en <h2>, legger du bare text-align: center på den. Trenger du en oppfriskning av hvordan overskrifter settes opp, har vi en guide til hvordan du definerer overskrifter med HTML.

Hva text-align ikke gjør

text-align sentrerer innholdet inni et element – ikke selve elementet. En div som fyller hele bredden vil fortsatt fylle hele bredden; bare teksten inni flyttes til midten. Skal du sentrere selve boksen, trenger du en av metodene under.

Slik sentrerer du en boks med margin: auto

margin: 0 auto sentrerer et blokkelement vannrett – men bare hvis elementet har en bestemt bredde. Nettleseren fordeler da den ledige plassen likt på venstre og høyre side, så boksen havner i midten.

.boks {
  width: 400px;
  margin: 0 auto;
}

Her betyr 0 ingen margin over og under, mens auto gir lik margin på sidene. Uten en fast width (eller max-width) skjer det ingenting, fordi boksen allerede fyller all tilgjengelig bredde.

Et vanlig misforståelse er at margin: auto også sentrerer loddrett. Det gjør den ikke i normal dokumentflyt – den loddrette automargin regnes som null. For loddrett sentrering må du bruke flexbox eller grid.

Sentrere både vannrett og loddrett med flexbox

Flexbox er den mest brukte moderne metoden når du vil sentrere innhold i begge retninger samtidig. Du gjør containeren (foreldreelementet) om til en flex-container og bruker to egenskaper: justify-content for vannrett og align-items for loddrett.

.container {
  display: flex;
  justify-content: center; /* vannrett */
  align-items: center;     /* loddrett */
  height: 300px;           /* nødvendig for loddrett sentrering */
}

Legg merke til høyden: loddrett sentrering gir bare mening hvis containeren har noe høyde å sentrere innenfor. Uten en height eller min-height blir containeren akkurat like høy som innholdet, og da er det ingenting å midtstille loddrett.

Flexbox er særlig nyttig for knapper, kort, bannere og «hero»-seksjoner der du vil ha innholdet plassert midt i et område. Metoden er også svært godt egnet til responsivt design, fordi innholdet holder seg sentrert uansett skjermstørrelse.

Sentrere med CSS grid

CSS grid gir den aller korteste måten å sentrere i begge retninger på. Én egenskap gjør hele jobben: place-items: center.

.container {
  display: grid;
  place-items: center;
  height: 300px;
}

place-items er en kortform som setter både align-items (loddrett) og justify-items (vannrett) til center samtidig. Også her trenger containeren en høyde for at den loddrette sentreringen skal bli synlig. Grid og flexbox gjør i praksis samme nytte for enkel sentrering – velg det du synes er lettest å lese.

Sentrere et enkeltelement med position og transform

Noen ganger vil du sentrere ett bestemt element oppå noe annet – for eksempel en tekst midt på et bilde. Da kan du kombinere absolutt posisjonering med en transform:

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Her flyttes elementets øvre venstre hjørne til midten av foreldreelementet (top: 50%; left: 50%;), og deretter trekkes elementet tilbake med halvparten av sin egen bredde og høyde (translate(-50%, -50%)), slik at det blir perfekt sentrert. Dette er et nyttig triks for overlegg, men for vanlig layout er flexbox og grid enklere og mindre feilutsatt.

Hvordan sentrerer du et bilde?

Et bilde er som standard et inline-element, så det reagerer på text-align: center hvis du setter det på foreldreelementet:

<p style="text-align: center;">
  <img src="bilde.jpg" alt="Beskrivelse">
</p>

Vil du i stedet behandle bildet som en blokk, gjør du det om til display: block og bruker margin: 0 auto:

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

Husk alltid en beskrivende alt-tekst på bilder. Vi har en egen gjennomgang av hvordan du legger til bilde med HTML hvis du vil ha detaljene.

Sentrere tekst loddrett på én linje

Har du bare én tekstlinje som skal stå loddrett midt i et element – for eksempel teksten inne i en knapp eller en meny-boks – finnes det et enkelt gammelt triks: sett line-height lik elementets høyde.

.knapp {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

Siden linjehøyden er like stor som boksen, havner den ene tekstlinjen automatisk på midten loddrett, mens text-align: center tar seg av det vannrette. Metoden er rask og krever ingen flex- eller grid-container, men den har en viktig begrensning: den virker bare med én enkelt tekstlinje. Går teksten over to linjer, sprekker sentreringen, og da bør du gå over til flexbox. For alt som skal tåle flere linjer og ulike skjermstørrelser er flexbox eller grid det tryggere valget.

Bør du egentlig sentrere teksten?

Å kunne sentrere er én ting – å vite når du bør gjøre det er en annen. Sentrert tekst passer godt til korte elementer som overskrifter, sitater, bildetekster, knapper og enkle bannere, der det gir et rolig og balansert uttrykk.

Lange brødtekster bør du derimot som regel venstrestille. Når hver linje starter på et nytt sted, må øyet lete seg fram til begynnelsen av neste linje, og lesingen går tregere. Dette gjelder særlig for personer med lese- og skrivevansker. Et godt prinsipp er derfor: sentrer korte, blikkfang-pregede elementer, og la sammenhengende tekst stå venstrestilt. Lesbarhet og rolig tekstoppsett er dessuten blant kriteriene for en effektiv nettside.

Slik sentrerer du tekst i WordPress

Bruker du WordPress, trenger du som regel ikke skrive kode i det hele tatt. I blokkredigereren (Gutenberg) merker du en avsnitts- eller overskriftsblokk, og i verktøylinjen som dukker opp velger du justeringsikonet og «Midtstill tekst». WordPress legger da til riktig CSS bak kulissene.

For bilder og andre blokker finnes samme valg – du velger blokken og klikker på midtstill-ikonet. Vil du ha full kontroll med egen CSS, kan du legge stilene i temaets tilpasningsverktøy under «Tilleggs-CSS», eller i et barnetema. Skal du bytte utseende helt, kan det være verdt å se på hvor du kan kjøpe gode WordPress-tema.

Vanlige feil når du sentrerer innhold

Her er tabbene som oftest gjør at sentreringen ikke vil fungere – og hvordan du retter dem.

• Bruker text-align for å sentrere en boks. text-align flytter bare innholdet inni elementet, ikke elementet selv. Bruk margin: 0 auto eller flexbox for å sentrere selve boksen.
• Glemmer bredden ved margin: 0 auto. Uten width eller max-width fyller boksen hele bredden, og da er det ingenting å sentrere.
• Venter loddrett sentrering av margin: auto. Det virker bare vannrett i normal dokumentflyt. Bruk flexbox eller grid for den loddrette aksen.
• Flexbox/grid uten høyde. align-items: center og place-items: center krever at containeren har en høyde, ellers er det ikke noe rom å sentrere loddrett innenfor.
• Fortsetter å bruke <center>. Taggen er foreldet, feiler validering og kan slutte å virke. Bytt den ut med CSS.
• Inline-stil overalt. Fungerer, men blir rotete. Samle stilene i et stilark eller en klasse så koden blir lett å vedlikeholde.

Hvordan tester du at sentreringen virker?

Den raskeste måten å feilsøke på er nettleserens innebygde utviklerverktøy. Høyreklikk på elementet og velg «Inspiser» (eller trykk F12), så ser du nøyaktig hvilke CSS-regler som gjelder og kan skru dem av og på direkte. Vil du forstå hvordan selve koden bak en side er bygd opp, har vi en artikkel om hvordan du ser HTML-kilden til en side.

Test alltid resultatet på både mobil og desktop. Et element som ser sentrert ut på en bred skjerm kan oppføre seg annerledes når plassen blir trang – nok en grunn til at flexbox og grid, som tilpasser seg automatisk, er trygge valg.

Vanlige spørsmål (FAQ)

Er <center>-taggen forbudt å bruke?

Den er ikke forbudt, men den er foreldet. De fleste nettlesere viser den fortsatt riktig av hensyn til gamle sider, men den feiler HTML-validering og støtten kan forsvinne. For nye sider bør du alltid sentrere med CSS i stedet.

Hvordan sentrerer jeg tekst uten et eget CSS-fil?

Du kan skrive stilen rett i elementet med en inline-stil, for eksempel <p style="text-align: center;">...</p>. Det fungerer med én gang, men blir uoversiktlig hvis du har mye innhold. Da lønner det seg å samle stilene i en klasse.

Hvorfor sentrerer ikke margin: auto loddrett?

I normal dokumentflyt regner nettleseren den loddrette automargin som null, så elementet flyttes ikke opp eller ned. margin: 0 auto virker derfor bare vannrett. For loddrett sentrering bruker du flexbox eller CSS grid på foreldreelementet.

Hvordan sentrerer jeg et bilde i midten av siden?

Sett text-align: center på avsnittet rundt bildet, eller gjør bildet om til en blokk med display: block og legg til margin: 0 auto. Begge deler plasserer bildet midt på linjen. Husk en beskrivende alt-tekst.

Bør jeg bruke flexbox eller grid for sentrering?

For å sentrere ett innhold i begge retninger gjør de samme nytte. Grid er kortest med place-items: center, mens flexbox (justify-content og align-items) ofte oppleves som lettest å forstå for nybegynnere. Velg det du synes er klarest.