Bilder är en viktig del av alla webbapplikationer. Att inkludera många bilder i en webbapplikation rekommenderas i allmänhet inte, men det är viktigt att använda bilderna där de behövs. CSS hjälper oss att kontrollera visningen av bilder i webbapplikationer.

Att justera en bild innebär att placera bilden i mitten, vänster och höger. Vi kan använda flyta egendom och textjustera egenskap för justering av bilder.

Om bilden finns i div-elementet kan vi använda textjustera egenskap för att justera bilden i div.

Exempel

I det här exemplet justerar vi bilderna med hjälp av textjustera fast egendom. Bilderna finns i div-elementet.

 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"> 

Testa det nu

Produktion

Använder flytegenskap

CSS float-egenskapen är en positioneringsegenskap. Den används för att skjuta ett element till vänster eller höger, så att andra element kan lindas runt det. Det används vanligtvis med bilder och layouter.

Element flyter endast horisontellt. Så det är bara möjligt att flyta element åt vänster eller höger, inte upp eller ner. Ett flytande element kan flyttas så långt åt vänster eller höger som möjligt. Det betyder helt enkelt att ett flytande element kan visas längst till vänster eller längst till höger.

Exempel

 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"> 

Produktion