Cómo centrar una imagen usando programación HTML

Un codificador de páginas web utiliza el lenguaje de marcado de hipertexto para indicarle al navegador web el propósito funcional de cada elemento de una página, como un párrafo, un encabezado o una lista. Desde HTML 4, las hojas de estilo en cascada han proporcionado al programador una forma de decirle al navegador cómo debe verse cada uno de esos elementos, aparte de definir qué son. Una página puede tener diferentes estilos CSS para diferentes tipos de dispositivos, como teléfonos móviles y computadoras de escritorio, lo que permite que la apariencia de la página cambie sin que el codificador necesite cambiar el HTML. Usa las propiedades CSS para centrar una imagen.

Paso 1

Coloque la etiqueta "img" en el archivo HTML donde desea que se muestre su imagen en la página web. Debe estar entre las etiquetas "body" y después de las etiquetas "h1". Por ejemplo,

Este es tu texto.

define una imagen llamada photo.jpg que tiene 170 píxeles de ancho y 50 píxeles de alto. Es lo primero en la página después del encabezado superior.

Paso 2

Utilice el atributo CSS "margen" para definir el espacio alrededor de los elementos de la página, como las imágenes. El valor "automático" para el atributo de margen le dice al navegador web que determine automáticamente la cantidad de espacio. Entonces, define que el espacio alrededor de la imagen lo determina el navegador.

Paso 3

Utilice la propiedad "display" para definir cómo se muestra un elemento de página. El valor de "bloque" para la propiedad de visualización le dice al navegador web que muestre el elemento en su propia línea, con un espacio arriba y abajo. Entonces, define la misma imagen, pero con la adición de "display:block;" ahora lo coloca en su propia línea.

Paso 4

Vea la página web en varios navegadores diferentes para verificar que la imagen esté centrada correctamente.

Consejo

Incluye la descripción de la imagen dentro de una etiqueta "alt". Esto hace que su página sea más accesible para los lectores con problemas de visión y garantiza que su código cumpla con los estándares.