Cómo centrar una imagen en HTML

Descargar el PDF
Coescrito por Personal de wikiHow

Descargar el PDF

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

Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe align="middle"> Este es el final de la parte de la imagen de la etiqueta. [1]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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"

Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Podrás incluir la imagen dentro de ese elemento centrado. Sin embargo, esto creará espacios adicionales alrededor del elemento.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Empieza centrando el elemento. Escribe <center>.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe <img src="imagenperrobailando.gif" alt="perro bailando" .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-460px-Center-an-Image-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-728px-Center-an-Image-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-460px-Center-an-Image-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-728px-Center-an-Image-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    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

wikiHows relacionados

Cómo
establecer el color de fondo en HTML
4 formas de agregar un enlace a una imagen
Cómo
cambiar el color de botón en HTML
Cómo
ejecutar un archivo HTML en Visual Studio Code
Cómo
insertar espacios en HTML
Cómo
crear una calculadora usando HTML
Cómo crear una línea horizontal en HTML
Cómo
hacer una página web en HTML
Cómo
insertar imágenes con HTML
Cómo
editar archivos HTML
Cómo
crear un enlace de correo electrónico en HTML
Cómo
cambiar el color del texto en HTML
Cómo
hacer que el texto parpadee en HTML
Cómo
hackear una página web con HTML
Anuncio

Referencias

  1. ↑ http://www.w3schools.com/tags/att_img_align.asp
  2. ↑ http://www.netmechanic.com/news/vol7/html_no10.htm

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 115 682 visitas.

¿Te ayudó este artículo?

Anuncio