Sådan centreres billeder med CSS

Ønsker du at centrere et billede ved hjælp af CSS? Tilpasningsproblemer er ofte en kilde til frustration for webdesignere. Heldigvis er det virkelig nemt at centrere et billede med CSS, og vi viser dig, hvordan du får dette gjort i et par trin.

Som med mange webdesignopgaver er der mere end én måde at få dette gjort på! Vi dækker tre hovedmetoder i denne artikel. Lad os komme igang!

1. Brug marginen Egenskab

Indstilling af margen egenskab er en af ​​de nemmeste måder at centrere et billede vandret ved hjælp af CSS. Marginer er en kernekomponent i CSS-boksmodellen.

Først skal du transformere billedelementet fra et inline til et blok. HTML-elementer på blokniveau optager hele bredden af ​​deres overordnede element og er i stand til at optage hele bredden af ​​en side.

Ved at gøre et billedelement til et blokelement, kan du derefter manipulere dets position ved at justere dets vandrette margener. Du skal også indstille en specifik bredde for billedet for at bestemme, hvor meget plads billedet optager på siden.

Uanset hvilken bredde du vælger, skal billedet have lige venstre og højre marginer. Det kan du nemt opnå ved at give margin-egenskaben en værdi på auto:

img.center {
 display: blok;
 margin-venstre: auto;
 margin-right: auto;
 bredde: 800px;
}

2. Brug Flexbox Layout

Denne metode kræver, at billedet placeres i et element på blokniveau, normalt et div:

Når du har gjort dette, kan du tilføje nogle egenskaber for at manipulere dets udseende. Du skal bruge to CSS-egenskaber.

Den første er Skærm ejendom med dens værdi sat til bøje. Du kan også brug flex til at justere elementer i HTML. Den anden ejendom, du tilføjer til din div, er retfærdiggøre-indhold, med dens værdi sat til centrum ligesom:

div.center {
 display: flex;
 retfærdiggøre-indhold: center;
}

3. Brug det forældede centerelement

Bedste fremgangsmåder på nettet opfordrer dig til at bruge CSS til styling og HTML til semantik, så du bør ikke bruge denne HTML-metode. Det centrum tag, som centrerer indholdet vandret, er forældet i HTML5.

Men hvis du skal, her er, hvordan du centrerer et billede ved hjælp af HTML alene. Du skal blot indpakke img tag i et center tag som sådan:

Sådan justerer du dine billeder i HTML

Vi har vist dig tre forskellige, brugervenlige metoder til at centrere dine billeder i et HTML-dokument. Prøv dem alle, og vælg den, der passer bedst til dig. Undgå den tredje metode, medmindre du absolut ikke har noget valg!

En ting at huske på er, at der er en del flere måder at centrere billeder ved hjælp af HTML og CSS. En almindelig metode, der fungerer til både tekst og inline-billeder, er tekstjustering ejendom.

Sådan centreres tekst på din webside med CSS

Læs Næste

Om forfatteren