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-align
eiendommen. 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: auto
eiendommen (for venstre marg og høyre marg).
Imidlertid vil bruk margin: auto
alene 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-align
eiendommen til en container, bruker vi også display: flex
en container.
Bruk av display: flex
alene 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-content
Eiendommen 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: flex
egenskapen 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: flex
igjen 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-items
egenskap 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 position
og transform
egenskaper 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 static
til 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: relative
til 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 transform
eiendom 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!