CSS hjelper oss med å kontrollere visningen av bilder i nettapplikasjoner. Sentrering av bilder eller tekster er en vanlig oppgave i CSS. For å sentrere et bilde må vi angi verdien på marg-venstre og marg-høyre til auto og gjør det til et blokkelement ved å bruke display: blokk; eiendom.
Hvis bildet er i div-elementet, kan vi bruke tekst-align: center; egenskap for å justere bildet til sentrum i div.
De element sies å være et inline-element som enkelt kan sentreres ved å bruke tekst-align: center; egenskapen til CSS til det overordnede elementet som inneholder det.
Merk: Bildet kan ikke sentreres hvis bredden er satt til 100 % (full bredde).
Vi kan bruke stenografi-egenskapen margin og sett den til auto for å justere bildet i midten, i stedet for å bruke marg-venstre og marg-høyre eiendom.
La oss se hvordan du sentrerer et bilde ved å bruke tekst-align: center; egenskap til det overordnede elementet.
python __dict__
Eksempel
I dette eksemplet justerer vi bildene ved å bruke tekst-align: center; eiendom. Bildet er i div-elementet.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Test det nå Produksjon
Eksempel
Nå bruker vi margin-venstre: auto; marg-høyre: auto; og display: blokk; egenskaper for å justere bildet til midten.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Test det nå Produksjon
