A képek minden webes alkalmazás fontos részét képezik. Általában nem ajánlott sok képet beilleszteni egy webalkalmazásba, de fontos, hogy a képeket ott használjuk, ahol szükség van rájuk. A CSS segít nekünk a képek webalkalmazásokban való megjelenítésének szabályozásában.

A kép igazítása azt jelenti, hogy a képet középre, balra és jobbra helyezzük. Használhatjuk a úszó ingatlan és szöveg igazítás tulajdonság a képek igazításához.

Ha a kép a div elemben van, akkor használhatjuk a szöveg igazítás tulajdonság a kép igazítására a divben.

Példa

Ebben a példában a képeket a segítségével igazítjuk szöveg igazítás ingatlan. A képek a div elemben vannak.

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

Tesztelje most

Kimenet

Úszó tulajdonság használata

A CSS float tulajdonság egy helymeghatározó tulajdonság. Arra használják, hogy egy elemet balra vagy jobbra toljanak, lehetővé téve, hogy más elemek körbevegyék. Általában képekhez és elrendezésekhez használják.

Az elemek csak vízszintesen vannak lebegtetve. Így csak az elemek balra vagy jobbra úsztatása lehetséges, felfelé vagy lefelé nem. Egy lebegő elem a lehető legtávolabb balra vagy jobbra mozgatható. Egyszerűen azt jelenti, hogy egy lebegtetett elem a bal szélső vagy a jobb szélsőben jelenhet meg.

Példa

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

Kimenet