Les imatges són una part important de qualsevol aplicació web. Generalment no es recomana incloure moltes imatges en una aplicació web, però és important utilitzar les imatges allà on ho necessitin. CSS ens ajuda a controlar la visualització d'imatges en aplicacions web.
Alinear una imatge significa situar-la al centre, a l'esquerra i a la dreta. Podem utilitzar el flotar propietat i alineació de text propietat per a l'alineació d'imatges.
Si la imatge es troba a l'element div, podem utilitzar el alineació de text propietat per alinear la imatge al div.
Exemple
En aquest exemple, estem alineant les imatges utilitzant el alineació de text propietat. Les imatges es troben a l'element div.
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"> Prova-ho ara Sortida
Utilitzant la propietat flotant
La propietat flotant CSS és una propietat de posicionament. S'utilitza per empènyer un element cap a l'esquerra o la dreta, permetent que altres elements s'emboliquen al seu voltant. Generalment s'utilitza amb imatges i dissenys.
Els elements només floten horitzontalment. Per tant, només és possible flotar elements cap a l'esquerra o la dreta, no cap amunt ni cap avall. Un element flotant es pot moure tan lluny com sigui possible cap a l'esquerra o cap a la dreta. Simplement, vol dir que un element flotant es pot mostrar a l'extrema esquerra o extrema dreta.
Exemple
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"> Prova-ho ara Sortida
