Hvordan du sentrerer et bilde i html

Å justere bildene dine i en passende posisjon med hensyn til annet innhold på websidene dine er svært viktig. Denne riktige justeringen definerer og forbedrer strukturen til et nettsted. I HTML er det forskjellige måter du kan sentrere et bilde. Disse tilnærmingene har blitt diskutert her i denne bloggen.

Hvordan sentrerer et bilde ved hjelp av den tekstjusterte egenskapen

For å sentrere et bilde ved hjelp av den tekst-align-egenskapen, konsulter eksemplet nedenfor.

Html

I koden ovenfor lager vi en DIV -beholder og plasserer bildet vårt inne i den beholderen ved hjelp av taggen. Denne attributtet gir en inline styling til bildet. For å sentrere bildet bruker vi stilattributtet til DIV-beholderen for å stille inn den tekst-align-egenskapen til sentrum. Å bruke denne egenskapen på taggen har ingen effekt, derfor må du pakke bildet inni en beholder og tilordne denne egenskapen til den beholderen.

Produksjon

Slik sentrerer du et bilde.

Hvordan sentrerer et bilde ved hjelp av marginer

En annen måte å tildele bildet ditt en sentrert posisjon er ved å bruke margin-høyre og margin-venstre egenskaper som vi har vist i kodebiten nedenfor.

Html

Utgangen viser et sentrert bilde.

Konklusjon

For å sentrere et bilde i HTML, bruk enten Tekstalign eiendom eller margin-høyre og margin-venstre eiendom. Når du bruker den tekst-justerte egenskapen, pakker du bildet inn i en DIV-beholder og deretter bruker du stilattributtet, sett den tekstjusterte egenskapen til beholderen til sentrum, mens du bruker marginegenskapene først visningen av bildet til bildet til Blokker og tilordne deretter Auto til både margin-høyre og margin-venstre egenskaper.