tutorial centrar imagen con html y css facilmente

Como centrar una imagen en una web con HTML

Aunque no es necesariamente difícil, centrar imágenes en tus páginas web puede ser más complicado de lo que crees. La razón principal es que la etiqueta <img> es un elemento inline, por lo que se comporta de forma diferente a los elementos block. Algunos métodos utilizan HTML; otros, CSS, y algunos se consideran más “apropiados” que otros en el sentido de que no están obsoletos. A continuación, seleccione uno de los métodos que aparecen en la lista y siga las instrucciones.

Centrar una imagen usando el atributo style

Para la compatibilidad con HTML5, utilice un atributo style con el valor text-align:center dentro de un elemento block; como una etiqueta <p></p>.


Código HTML de ejemplo:

<p style="text-align:center;"><img src="https://internetctrl.com/medios/2020/06/internetctrl-logo.png" alt="Logo InternetCtrl"></p>

Y así es como quedaría la imagen centrada:

Logo InternetCtrl

La colocación del código anterior en un div puede afectar a la forma en que aparece en una pantalla. Por ejemplo, si se añade el código a un div con margen derecho, cambia la ubicación de la imagen centrada.
Consejo de InternetCtrl
Añadir un estilo inline como se ha mostrado arriba sólo debería hacerse una vez en la página web. Si necesita centrar varias imágenes, lea y ponga en practica la siguiente sugerencia y cree una clase CSS para ayudar a reducir el código redundante y hacer más rápida su página web.

Centrar la imagen convirtiendo <img> en un elemento en bloque

Una forma de centrar correctamente las imágenes es definir el elemento <img> como un elemento block. Para ello, añade una regla CSS a la cabecera de tu página (mostrada en el siguiente ejemplo), o en un archivo CSS externo vinculado.

Recomendamos hoy:  Cómo cambiar el tamaño de una imagen con HTML y CSS

Código HTML de ejemplo

<style type="text/css">
.centrarImagen
{
 text-align:center;
 display:block;
}
</style>

Con este código, puedes aplicar la clase centrarImagen a una etiqueta <img> sin tener que anidarla en un elemento a nivel de bloque. Este método funciona para todas las imágenes que necesites centrar en tu web.

Usar la etiqueta <center> (Obsoleto)

Puedes centrar una imagen encerrando la etiqueta <img> entre las etiquetas <center></center>. Con esta acción se centrará esa imagen, y sólo esa, en la página web. Hay que tener en cuenta que este método está obsoleto en HTML5 y no siempre funcionará en todos los navegadores en el futuro. Sólo recomendamos utilizar este método si ninguna de las otras sugerencias mencionadas anteriormente funcionan cuando se trata de centrar una imagen.

Código HTML de ejemplo

<center><img src="https://internetctrl.com/medios/2020/06/internetctrl-logo.png" height="150" width="200"></center>
5/5 - (2 votos)

¿Alguna duda? Deja un comentario