CSS ens ajuda a controlar la visualització d'imatges en aplicacions web. El centrat d'imatges o textos és una tasca habitual en CSS. Per centrar una imatge, hem d'establir el valor de marge-esquerra i marge-dreta a automàtic i convertir-lo en un element de bloc mitjançant l' visualització: bloc; propietat.
Si la imatge es troba a l'element div, podem utilitzar el alineació de text: centre; propietat per alinear la imatge al centre del div.
El es diu que l'element és un element en línia que es pot centrar fàcilment aplicant el alineació de text: centre; propietat de CSS a l'element pare que el conté.
Nota: la imatge no es pot centrar si l'amplada s'estableix al 100% (amplada total).
Podem utilitzar la propietat taquigràfica marge i posa-ho a automàtic per alinear la imatge al centre, en lloc d'utilitzar marge-esquerra i marge-dreta propietat.
Vegem com centrar una imatge aplicant alineació de text: centre; propietat al seu element pare.
Exemple
En aquest exemple, estem alineant les imatges utilitzant el alineació de text: centre; propietat. La imatge es troba a l'element div.
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"> Prova-ho ara Sortida
Exemple
Ara, estem utilitzant el marge esquerre: automàtic; marge dret: automàtic; i visualització: bloc; propietats per alinear la imatge al centre.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Prova-ho ara Sortida
