Sådan centreres et billede lodret og vandret med CSS
Mange udviklere kæmper, mens de arbejder med billeder. Håndtering af lydhørhed og justering er særlig hård, især centrering af et billede midt på siden.
Så i dette indlæg viser jeg nogle af de mest almindelige måder at centrere et billede både lodret og vandret ved hjælp af forskellige CSS-egenskaber.
Jeg har gennemgået CSS Position og Display egenskaber i mit tidligere indlæg. Hvis du ikke er fortrolig med disse egenskaber, anbefaler jeg at tjekke disse indlæg, før du læser denne artikel.
Her er en videoversion, hvis du vil tjekke den ud:
Centrering af et billede vandret
Lad os begynde med at centrere et billede vandret ved at bruge 3 forskellige CSS-egenskaber.
Tekstjustering
Den første måde at centrere et billede vandret på er at bruge text-align
egenskaben. Denne metode fungerer dog kun, hvis billedet er inde i en container på blokniveau som f.eks . :
div { text-align: center; }
Margen: Auto
En anden måde at centrere et billede på er ved hjælp af margin: auto
egenskaben (til venstre margen og højre margen).
Brug af margin: auto
alene fungerer dog ikke for billeder. Hvis du har brug for margin: auto
, er der 2 ekstra egenskaber, du også skal bruge.
Margen-auto-egenskaben har ingen effekter på elementerne på inline-niveau. Da
tagget er et indbygget element, skal vi først konvertere det til et element på blokniveau:
img { margin: auto; display: block; }
For det andet skal vi også definere en bredde. Så venstre og højre margen kan tage resten af det tomme rum og automatisk justere sig selv, hvilket gør tricket (medmindre vi giver det en bredde på 100%):
img { width: 60%; margin: auto; display: block; }
Skærm: Flex
Den tredje måde at centrere et billede vandret på er at bruge display: flex
. Ligesom vi brugte text-align
ejendommen til en container, bruger vi også display: flex
til en container.
Brug af display: flex
alene vil dog ikke være nok. Containeren skal også have en ekstra egenskab kaldet justify-content
:
div { display: flex; justify-content: center; } img { width: 60%; }
Den justify-content
egenskab arbejder sammen med display: flex
, som vi kan bruge til at centrere billedet vandret.
Endelig skal billedets bredde være mindre end beholderens bredde, ellers tager det 100% af pladsen, og så kan vi ikke centrere det.
Vigtigt: Den display: flex
Ejendommen er ikke understøttet i ældre versioner af browsere. Se her for flere detaljer.
Centrering af et billede lodret
Skærm: Flex
Til lodret justering er brug display: flex
igen virkelig nyttigt.
Overvej et tilfælde, hvor vores container har en højde på 800 px, men billedets højde er kun 500 pixel:
div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }
I dette tilfælde align-items: center
gør du tricket ved at tilføje en enkelt linje kode til containeren :
div { display: flex; justify-content: center; align-items: center; height: 800px; }
De align-items
ejendom kan positionere elementer lodret, hvis anvendt sammen med display: flex
.
Position: Absolutte & Transform egenskaber
En anden fremgangsmåde til lodret justering er ved hjælp af position
og transform
egenskaber sammen. Denne er lidt kompliceret, så lad os gøre det trin for trin.
Trin 1: Definer position absolut
For det første ændrer vi billedets placeringsadfærd fra static
til absolute
:
div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }
Det skal også være inde i en relativt positioneret container, så vi tilføjer position: relative
til dens container div.
Trin 2: Definer Top & Left Properties
For det andet definerer vi de øverste og venstre egenskaber for billedet og indstiller dem til 50%. Dette flytter startpunktet (øverst til venstre) af billedet til midten af beholderen:
img { width: 80%; position: absolute; top: 50%; left: 50%; }
Trin 3: Definer Transform-egenskaben
Men det andet trin har flyttet billedet delvist uden for sin container. Så vi er nødt til at bringe det tilbage indeni.
At definere en transform
egenskab og tilføje -50% til X- og Y-aksen gør tricket:
img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Der er andre måder at centrere ting vandret og lodret på, men jeg har forklaret de mest almindelige. Jeg håber, at dette indlæg hjalp dig med at forstå, hvordan du justerer dine billeder midt på siden.
Hvis du vil lære mere om webudvikling, er du velkommen til at besøge min Youtube-kanal for mere.
Tak fordi du læste!