Cómo centrar una imagen en HTML

Coescrito por Personal de wikiHow

Centrar las imágenes es una habilidad importante que debe aprenderse para programar páginas web. Por desgracia, los códigos cambian, y algunas etiquetas HTML se quedan obsoletas y no las reconocen todos los navegadores web. Usa estos métodos para centrar una imagen en HTML. Si no funciona ninguna, considera la posibilidad de usar las "Hojas de estilo en cascada" (del inglés "Cascading Style Sheets" o "CSS").

Método 1

Método 1 de 2:

Alinear con texto

1
No uses la palabra "center" en la etiqueta. En los códigos HTML, puedes introducir texto, pero debes identificar el centrado de la imagen con la palabra "middle". Una imagen no es un elemento de línea, por lo que se identifica en relación con otros elementos.
2
Comienza una línea nueva de código. Usa una etiqueta de párrafo para indicar que comienza una línea de texto. Abre la etiqueta con <p> y después escribe el texto.
3
Inserta la imagen escribiendo <img src="NombreImagen.gif". Después incluye la descripción de la imagen escribiendo alt="descripción de la imagen.
- La sección "src" indicará a la página web la URL de la imagen.
- La sección "alt" indicará a la página web cómo deberá llamarse.
4
Especifica la alineación de la imagen. Escribe align="middle"> Este es el final de la parte de la imagen de la etiqueta.^{[1]
X
Fuente de investigación}
5
Añade más texto. Después cierra la etiqueta con </p>. Como ejemplo, la etiqueta completa podrá tener un aspecto similar a este: <p>Estamos aprendiendo a usar HTML. <img src="imagenperrobailando.gif" alt="perro bailando" align="middle> El ejemplo está completo. </p>

Anuncio

Método 2

Método 2 de 2:

Alinear con la etiqueta "center"

1
Crea un elemento nuevo y centra ese elemento. Podrás incluir la imagen dentro de ese elemento centrado. Sin embargo, esto creará espacios adicionales alrededor del elemento.
2
Comienza una línea nueva de código. Empieza centrando el elemento. Escribe <center>.
3
Añade la etiqueta de la imagen. Escribe <img src="imagenperrobailando.gif" alt="perro bailando".
4
Especifica la altura y anchura de la imagen. Introduce height="200" width="200"> o cualquier otro tamaño que quieras. Este será el final de la parte de la imagen de la etiqueta.
5
Cierra la etiqueta con </center>. Por ejemplo, la etiqueta completa podrá tener un aspecto similar a este:
<center><img src="imagenperrobailando.gif" alt="perro bailando" height="200" width="200"></center>.^{[2]
X
Fuente de investigación}

Anuncio

Advertencias

Ten en cuenta que tanto las etiquetas de alineado como de centrado se quedarán obsoletas. Esto significa que no se usarán en el futuro. Aunque no existe una fecha exacta de cuándo dejarán de usarse, con el paso del tiempo, los navegadores dejarán de reconocerlas y tendrás que actualizar los códigos a CSS o HTML5.

Anuncio