Slik sentrerer du et bilde vertikalt og horisontalt med CSS

Mange utviklere sliter med å jobbe med bilder. Håndteringsrespons og justering er spesielt tøff, og sentrerer spesielt et bilde midt på siden.

Så i dette innlegget vil jeg vise noen av de vanligste måtene å sentrere et bilde både vertikalt og horisontalt ved hjelp av forskjellige CSS-egenskaper.

Jeg har gått gjennom CSS Position and Display-egenskapene i forrige innlegg. Hvis du ikke er kjent med disse egenskapene, anbefaler jeg å sjekke ut disse innleggene før du leser denne artikkelen.

Her er en videoversjon hvis du vil sjekke den ut:

Sentrere et bilde horisontalt

La oss begynne med å sentrere et bilde horisontalt ved å bruke 3 forskjellige CSS-egenskaper.

Tekstjustering

Den første måten å sentrere et bilde horisontalt på er å bruke text-aligneiendommen. Denne metoden fungerer imidlertid bare hvis bildet er inne i en container på blokknivå, for eksempel :

 div { text-align: center; } 

Margin: Auto

En annen måte å sentrere et bilde på er å bruke margin: autoeiendommen (for venstre marg og høyre marg).

Imidlertid vil bruk margin: autoalene ikke fungere for bilder. Hvis du trenger å bruke margin: auto, er det to ekstra egenskaper du også må bruke.

Margin-auto-egenskapen har ingen effekter på elementene på innebygd nivå. Siden taggen er et innebygd element, må vi først konvertere den til et element på blokknivå:

img { margin: auto; display: block; }

For det andre må vi også definere en bredde. Så venstre og høyre marg kan ta resten av det tomme rommet og justere seg automatisk, noe som gjør susen (med mindre vi gir den en bredde på 100%):

img { width: 60%; margin: auto; display: block; }

Skjerm: Flex

Den tredje måten å sentrere et bilde horisontalt på er å bruke display: flex. Akkurat som vi brukte text-aligneiendommen til en container, bruker vi også display: flexen container.

Bruk av display: flexalene vil imidlertid ikke være nok. Containeren må også ha en ekstra eiendom som heter justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

Den justify-contentEiendommen samarbeider med display: flex, som vi kan bruke til å sentrere bildet horisontalt.

Til slutt må bredden på bildet være mindre enn bredden på beholderen, ellers tar det 100% av plassen, og da kan vi ikke sentrere det.

Viktig: Den display: flexegenskapen støttes ikke i eldre versjoner av nettlesere. Se her for mer informasjon.

Sentrere et bilde vertikalt

Skjerm: Flex

For vertikal justering er bruk display: flexigjen veldig nyttig.

Tenk på et tilfelle der containeren vår har en høyde på 800 px, men høyden på bildet er bare 500 px:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Nå, i dette tilfellet, legger du til en enkelt linje med kode i containeren align-items: center:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

Den align-itemsegenskap kan posisjonere elementene vertikalt hvis det brukes sammen med display: flex.

Posisjon: Absolute & Transform Properties

En annen metode for vertikal innretting er ved hjelp av positionog transformegenskaper sammen. Denne er litt komplisert, så la oss gjøre det trinn for trinn.

Trinn 1: Definer posisjon absolutt

For det første endrer vi posisjoneringsatferden til bildet fra statictil absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Det skal også være inne i en relativt posisjonert container, så vi legger position: relativetil container-div.

Trinn 2: Definer egenskaper for topp og venstre

For det andre definerer vi de øverste og venstre egenskapene for bildet, og setter dem til 50%. Dette vil flytte startpunktet (øverst til venstre) av bildet til midten av beholderen:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

Trinn 3: Definer transformasjonsegenskapen

Men det andre trinnet har flyttet bildet delvis utenfor beholderen. Så vi må ta den inn igjen.

Å definere en transformeiendom og legge til -50% til X- og Y-aksen gjør susen:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Det er andre måter å sentrere ting horisontalt og vertikalt, men jeg har forklart de vanligste. Jeg håper dette innlegget hjalp deg med å forstå hvordan du kan justere bildene dine midt på siden.

Hvis du vil lære mer om webutvikling, kan du besøke Youtube-kanalen min for mer.

Takk for at du leser!