Sådan centrerer du tekst i CSS

At centrere tekst i CSS er en grundlæggende, men ofte undervurderet færdighed. Det er vigtigt at forstå, hvordan forskellige metoder fungerer, så du kan anvende dem korrekt afhængigt af din layoutstruktur. Her er nogle af de mest almindelige metoder til at centrere tekst.

Brug af text-align Egenskaben

Den mest enkle metode til at centrere tekst i CSS er at bruge text-align egenskaben. Denne egenskab anvendes på det overordnede container-element, hvor teksten findes. Her er et eksempel:

.container {
    text-align: center;
}

I dette tilfælde vil al teksten inden for .container-elementet blive centreret. Dette er især nyttigt til centreret tekst i overskrifter, afsnit eller andre inline-elementer.

Centering med Flexbox

Flexbox er en moderne metode, der giver mere kontrol over layoutet. Ved at bruge display: flex; og justify-content: center; kan du centrere tekst både horisontalt og vertikalt. Her er hvordan du kan gøre det:

.container {
    display: flex;
    justify-content: center;
    align-items: center; /* Vertikal centrering */
    height: 100vh; /* Sætter højden til viewportens højde */
}

Denne metode er særligt nyttig, når du arbejder med flere elementer, og du ønsker en ensartet centreret præsentation.

Centreret tekst i en boks

Hvis du vil centrere tekst inden for en bestemt boks eller et element, kan du bruge følgende CSS:

.box {
    width: 300px; /* Angiv en bredde */
    margin: 0 auto; /* Centrerer boksen horisontalt */
    text-align: center; /* Centrerer teksten inden i boksen */
    border: 1px solid #000; /* Bare for synlighed */
}

Ved at sætte margin: 0 auto; på boksen vil den automatisk blive centreret i sin overordnede container.