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-alignegenskaben. 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: autoegenskaben (til venstre margen og højre margen).

Brug af margin: autoalene 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-alignejendommen til en container, bruger vi også display: flextil en container.

Brug af display: flexalene 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-contentegenskab 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: flexEjendommen 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: flexigen 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: centergø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-itemsejendom 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 positionog transformegenskaber 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 statictil 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: relativetil 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 transformegenskab 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!