- Hvordan sentrere et bilde i Div horisontalt?
- Margin eiendom
- Flexbox-modul
- Rutenettvisningsoppsett
- Posisjonsattributt
Hvordan sentrere et bilde i Div horisontalt?
Utvikleren kan bruke margin-egenskapen, Flexbox-modulen, Grid View-layout og Posisjon-attributtet for å sentrere et bilde i div-en horisontalt. Følg veiledningen nedenfor for å sentrere bildet horisontalt i div-taggen.
La oss anta at det er en div der bildet er plassert på denne måten i HTML-filen:
< div klasse = 'rot' >
< img src = '../book.jpg' høyde = 'femti%' bredde = 'femti%' klasse = 'bilde' >
< / div >
Bildet får bredde og høyde på 50 % og en klasse med 'bilde'.
Bruke Margin Property
Brukere kan legge til plass rundt HTML-elementene ved å bruke margin-egenskapen. Den tildeler en margin i henhold til tilgjengelig plass etter å endre størrelse på vindusskjermen. Setter for eksempel marg-venstre og høyre til auto, og visningsegenskapen er satt til å blokkere:
img {
display: blokk;
margin-venstre: auto;
marg-høyre: auto;
}
Etter å ha utført eksemplet ovenfor, ser nettsiden slik ut:
Utgangen ovenfor har vist at bildet nå er i midten.
Bruker Flexbox-modulen
« flexbox ” er en modul som inneholder et komplett sett med egenskaper. I vårt tilfelle velger du rotelementklassen og bruker flex som en verdi for visningsegenskapen. Angi sentrum som en verdi for ' rettferdiggjøre-innhold ' og ' align-elementer ' egenskaper:
.rot {display: flex;
rettferdiggjøre- innhold : senter;
align-items: center;
bakgrunn- farge : blå;
}
Nettsiden ser slik ut etter å ha utført koden:
Utgangen ovenfor viser at bildet vises i midten av div-en med en bakgrunnsfarge satt til 'blå'.
Bruke Grid View Layout Module
Rutenettvisningsoppsettet har 12 kolonner, og den totale bredden er satt til 100 % og den plasserer hvert element på en bestemt posisjon på nettsiden:
.rot {display: rutenett;
stedselementer: senter;
}
I kodebiten ovenfor er 'grid'-verdien tilordnet visningsegenskapen. Mens 'place-item' brukes som en forkortelse for 'justify-content' og 'align-items'-egenskaper:
Utdataene autentiserer at bildet er i midten av div ved hjelp av rutenettmetoden:
Bruke Posisjonsattributt
Ved å sette posisjonen til rotklassen til relativ verdi og bildeklassen til absolutt verdi. Bildet kan vises i midten av div:
.rot {stilling: pårørende;
}
.bilde {
bredde : 700px;
høyde : 500px;
posisjon: absolutt;
venstre: femti %;
transform: translateX ( - femti % ) ;
}
Bildet flyttes til venstre for '50%' og transformeres deretter tilbake til '-50%' ved X-aksen. Den viser bildet i midten av div horisontalt:
Slik kan bildet sentreres i div horisontalt.
Konklusjon
For å sette bildet horisontalt i et div-element, bruk ' margin ', ' flex modul ', ' rutenettoppsett ' og ' posisjon ' egenskaper. « margin ” egenskapen til venstre og høyre er satt til auto. 'Fleksimodulen' og 'rutenettoppsettet' setter skjermen til henholdsvis flex og rutenett og bruker ' sted element “ egenskap for å sentrere bildet. Posisjonsegenskapen setter verdien i forhold til rotklassen og absolutt til bildeklassen og bruker 'venstre' og 'transform' egenskaper. Denne bloggen har demonstrert hvordan du kan sentrere bilder i en div horisontalt.