Hvordan sentrere bilder med CSS

Ønsker du å sentrere et bilde ved hjelp av CSS? Tilpasningsproblemer er ofte en kilde til frustrasjon for webdesignere. Heldigvis er det veldig enkelt å sentrere et bilde med CSS, og vi viser deg hvordan du får dette gjort i noen få trinn.

Som med mange webdesignoppgaver, er det mer enn én måte å få dette gjort på! Vi vil dekke tre hovedmetoder i denne artikkelen. La oss komme i gang!

1. Bruk margen Property

Innstilling av margin egenskap er en av de enkleste måtene å sentrere et bilde horisontalt ved hjelp av CSS. Marginer er en kjernekomponent i CSS-boksmodellen.

Først må du transformere bildeelementet fra et inline-element til et blokk-element. HTML-elementer på blokknivå opptar hele bredden til overordnet element og er i stand til å ta opp hele bredden på en side.

Ved å gjøre et bildeelement til et blokkelement, kan du deretter manipulere dets posisjon ved å justere dets horisontale marger. Du må også angi en spesifikk bredde for bildet for å bestemme hvor mye plass bildet tar opp på siden.

Uansett hvilken bredde du velger, må bildet ha like venstre og høyre marger. Du kan enkelt oppnå dette ved å gi margin-egenskapen en verdi på auto:

img.center {
 display: blokk;
 margin-venstre: auto;
 marg-høyre: auto;
 bredde: 800px;
}

2. Bruk Flexbox Layout

Denne metoden krever å sette bildet i et blokknivåelement, vanligvis en div:

Når du har gjort dette, kan du legge til noen egenskaper for å manipulere utseendet. Du bruker to CSS-egenskaper.

Den første er vise eiendom med verdien satt til bøye seg. Du kan også bruk flex for å justere elementer i HTML. Den andre egenskapen du legger til div er rettferdiggjøre-innhold, med verdien satt til senter som så:

div.center {
 display: flex;
 rettferdiggjøre-innhold: senter;
}

3. Bruk det avviklede senterelementet

Beste nettpraksis oppfordrer deg til å bruke CSS for styling og HTML for semantikk, så du bør ikke bruke denne HTML-metoden. De senter taggen, som sentrerer innholdet horisontalt, er avviklet i HTML5.

Men hvis du må, her er hvordan du sentrerer et bilde ved å bruke HTML alene. Bare pakk inn img tag i en sentertagg slik:

Slik justerer du bildene dine i HTML

Vi har vist deg tre forskjellige, brukervennlige metoder for å sentrere bildene dine i et HTML-dokument. Prøv dem alle og velg den som passer best for deg. Unngå den tredje metoden med mindre du ikke har noe valg!

En ting å huske på er at det er ganske mange flere måter å sentrere bilder ved hjelp av HTML og CSS. En vanlig metode som fungerer for både tekst og innebygde bilder er tekstjustering eiendom.

Slik sentrerer du tekst på websiden din med CSS

Les Neste

Om forfatteren