- Hvordan centreres et billede i Div vandret?
- Margin Ejendom
- Flexbox modul
- Gittervisningslayout
- Positionsattribut
Hvordan centreres et billede i Div vandret?
Udvikleren kan bruge margin-egenskaben, Flexbox-modulet, Grid View-layout og Position-attributten til at centrere et billede i div'en vandret. Følg nedenstående guide for at centrere billedet vandret i div-tagget.
Lad os antage, at der er en div, hvor billedet er placeret på denne måde i HTML-filen:
< div klasse = 'rod' >
< img src = '../book.jpg' højde = 'halvtreds%' bredde = 'halvtreds%' klasse = 'billede' >
< / div >
Billedet får bredde og højde på 50% og en klasse af 'billede'.
Brug af Margin-egenskab
Brugere kan tilføje plads omkring HTML-elementerne ved hjælp af egenskaben margin. Den tildeler en margen i henhold til den ledige plads efter at have ændret størrelsen på vinduesskærmen. Indstiller f.eks. margen-venstre og højre til auto, og visningsegenskaben er indstillet til at blokere:
img {
display: blok;
margin-venstre: auto;
margin-right: auto;
}
Efter at have udført ovenstående eksempel, ser websiden sådan ud:
Ovenstående output har vist, at billedet nu er i midten.
Brug af Flexbox-modul
Det ' flexbox ” er et modul, der indeholder et komplet sæt egenskaber. I vores tilfælde skal du vælge rodelementklassen og bruge flex som en værdi for visningsegenskaben. Indstil centrum som en værdi for ' retfærdiggøre-indhold ' og ' align-elementer ' ejendomme:
.rod {display: flex;
retfærdiggøre- indhold : center;
align-items: center;
baggrund- farve : blå;
}
Hjemmesiden ser sådan ud efter at have udført koden:
Ovenstående output viser, at billedet vises i midten af div'en med en baggrundsfarve sat til 'blå'.
Brug af Grid View Layout Module
Gittervisningslayoutet har 12 kolonner, og den samlede bredde er sat til 100 %, og det placerer hvert element på en bestemt position på websiden:
.rod {display: gitter;
sted-emner: center;
}
I ovenstående kodestykke tildeles 'gitter'-værdien til visningsegenskaben. Mens 'place-item' bruges som en stenografi for 'justify-content' og 'align-items' egenskaber:
Outputtet godkender, at billedet er i midten af div'en ved hjælp af gittermetoden:
Brug af positionsattribut
Ved at sætte positionen af rodklassen til relativ værdi og billedklassen til absolut værdi. Billedet kan vises i midten af div:
.rod {stilling: relativ;
}
.billede {
bredde : 700px;
højde : 500px;
position: absolut;
venstre: halvtreds %;
transform: translateX ( - halvtreds % ) ;
}
Billedet flyttes til venstre for '50%' og transformeres derefter tilbage til '-50%' ved X-aksen. Det viser billedet i midten af div vandret:
Sådan kan billedet centreres i div vandret.
Konklusion
For at indstille billedet vandret i et div-element, skal du bruge ' margen ', ' flex modul ', ' gitter layout ' og ' position ' ejendomme. Det ' margen ” egenskaben for venstre og højre er indstillet til auto. 'Flex-modulet' og 'gitterlayout' indstiller displayet til henholdsvis flex og gitter og bruger ' placere vare “ egenskab for at centrere billedet. Positionsegenskaben indstiller værdien i forhold til rodklassen og absolut til billedklassen og bruger egenskaber 'venstre' og 'transform'. Denne blog har med succes demonstreret, hvordan man centrerer billeder i en div vandret.