Cómo centrar una imagen usando programación HTML

Un desarrollador web usa HTML (Hypertext Markup Language) para indicar al navegador el propósito funcional de cada elemento: párrafo, encabezado, lista, etc. Desde HTML 4, las CSS (Cascading Style Sheets) permiten decir al navegador cómo debe verse cada elemento, separando presentación de estructura. Una página puede tener distintos estilos CSS para distintos dispositivos (móviles, escritorio), cambiando la apariencia sin tocar el HTML. Usa propiedades CSS para centrar una imagen.

Paso 1

Coloca la etiqueta img en el HTML donde quieras que aparezca la imagen. Debe estar entre las etiquetas body y después de los h1. Ejemplo:

<body>
<h1 style="text-align:center;">Este es tu texto.</h1>
<img src="foto.jpg" alt="Descripción de la imagen" width="270" height="50" />
</body>

Define una imagen llamada foto.jpg de 270 px de ancho y 50 px de alto. Es lo primero en la página tras el encabezado principal.

Paso 2

Usa el atributo CSS margin para definir el espacio alrededor de elementos como imágenes. El valor auto le dice al navegador que calcule automáticamente el espacio. Así: <img src="foto.jpg" alt="Descripción" width="170" height="50" style="margin:auto;" /> define que el espacio alrededor lo determina el navegador.

Paso 3

Usa la propiedad display para definir cómo se muestra un elemento. El valor block hace que el elemento ocupe su propia línea, con espacio arriba y abajo. Así: <img src="foto.jpg" alt="Descripción" width="170" height="50" style="margin:auto;display:block;" /> define la misma imagen, pero display:block; la coloca en su propia línea.

Paso 4

Visualiza la página en varios navegadores para verificar que la imagen está bien centrada.

Consejo

Incluye la descripción de la imagen en un atributo alt. Hace tu página más accesible para lectores con discapacidad visual y asegura que tu código cumple estándares. <img src="foto.jpg" alt="Descripción de la imagen" />