Cómo centrar una imagen en HTML

Alinear sus imágenes en una posición apropiada con respecto a otro contenido en sus páginas web es muy importante. Esta alineación adecuada define y mejora la estructura de un sitio web. En HTML, hay varias formas con las que puede centrar una imagen. Estos enfoques se han discutido aquí en este blog.

Cómo centrar una imagen utilizando la propiedad de alineación de texto

Con el fin de centrar una imagen utilizando la propiedad de alineación de texto, consulte el ejemplo a continuación.

Html

En el código anterior, estamos haciendo un contenedor Div y colocando nuestra imagen dentro de ese contenedor usando la etiqueta. Este atributo proporciona un estilo en línea a la imagen. Luego, para centrar la imagen, estamos utilizando el atributo de estilo del contenedor DIV para establecer la propiedad de alineación de texto en el centro. El uso de esta propiedad en la etiqueta no tendrá ningún efecto, por lo tanto, debe envolver la imagen dentro de un contenedor y asignar esta propiedad a ese contenedor.

Producción

Así es como centras en una imagen.

Cómo centrar una imagen usando márgenes

Otra forma de asignar su imagen, una posición centrada es mediante las propiedades de margen-derecho y margen-izquierda como hemos demostrado en el fragmento de código a continuación.

Html

La salida muestra una imagen centrada.

Conclusión

Para centrar una imagen en HTML, use el texto alineado propiedad o el margen de derecha y margen de pesa propiedad. Cuando se usa la propiedad de alineación de texto, envuelva la imagen dentro de un contenedor DIV y luego el uso del atributo de estilo establece la propiedad de alineación de texto del contenedor en el centro, mientras que, en el caso de usar las propiedades de margen, primero establece la visualización de la imagen en bloquear y luego asignar auto a las propiedades de margen de margen y margen-izquierda.