Bilder er en viktig del av enhver nettapplikasjon. Det anbefales generelt ikke å inkludere mange bilder i en nettapplikasjon, men det er viktig å bruke bildene der de måtte ønske det. CSS hjelper oss med å kontrollere visningen av bilder i nettapplikasjoner.

Å justere et bilde betyr å plassere bildet i midten, venstre og høyre. Vi kan bruke flyte eiendom og tekstjustering egenskap for justering av bilder.

Hvis bildet er i div-elementet, kan vi bruke tekstjustering egenskap for å justere bildet i div.

Eksempel

I dette eksemplet justerer vi bildene ved å bruke tekstjustering eiendom. Bildene er i div-elementet.

Last ned turbo c++

 div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> 

Test det nå

Produksjon

Bruke flyteegenskap

CSS flyteegenskapen er en posisjoneringsegenskap. Den brukes til å skyve et element til venstre eller høyre, slik at andre elementer kan vikle seg rundt det. Det brukes vanligvis med bilder og oppsett.

chmod 755

Elementer flyter kun horisontalt. Så det er bare mulig å flyte elementer til venstre eller høyre, ikke opp eller ned. Et flytende element kan flyttes så langt til venstre eller høyre som mulig. Det betyr ganske enkelt at et flytende element kan vises ytterst til venstre eller ytterst til høyre.

Eksempel

 img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> 

Produksjon