Contenido

• Pasos
• Método 1 de 2: CSS (recomendado)
• Método 2 de 2: el atributo "alinear" en HTML

Atributo alinear etiqueta html> ha quedado obsoleto desde HTML5. Si bien este atributo todavía funciona en la mayoría de los navegadores web, se recomienda alinear las imágenes con hojas de estilo en cascada (CSS). En este artículo, le mostraremos cómo centrar imágenes usando CSS y la etiqueta obsoleta. alinear.

Pasos

Método 1 de 2: CSS (recomendado)

1. 1 Agrega código HTML para la imagen. Utilizará hojas de estilo en cascada (CSS) para alinear la imagen, pero deberá colocarla en la página utilizando HTML. A continuación se muestra un ejemplo del uso de la etiqueta img> para insertar una imagen en su código:

   img src = "dog.webp" alt = "esta es una foto de un perro">

   • En lugar de perro.webp sustituya el nombre del archivo de imagen, y después de "alt" ingrese la descripción de la imagen. Sentido centrar para "clase" no cambie, porque creará una clase CSS con ese nombre.
2. 2 Encuentra el código CSS. Si su sitio tiene un archivo CSS separado, ábralo. De lo contrario, lo más probable es que el CSS esté en la parte superior del archivo HTML, dentro de las etiquetas cabeza>... Desplácese hasta la parte superior del archivo para buscar etiquetas. estilo> / estilo>.
   • Si etiquetas estilo> / estilo> no, agréguelos. Lee este artículo para obtener más información.
3. 3 Agrega CSS para alinear la imagen. En lugar de "50%", puede ingresar un valor diferente para que la imagen aparezca en la página. No podrá centrar la imagen con un valor de "100%", por lo que este número debería ser diferente.

   .center {pantalla: bloque; margen izquierdo: automático; margen derecho: automático; ancho: 50%; }

4. 4 Guarde sus cambios. Guarde el archivo HTML y el archivo CSS (si corresponde). Esto centrará la imagen.
   • También dentro de las etiquetas img> puede agregar para centrar otras imágenes.

Método 2 de 2: el atributo "alinear" en HTML

1. 1 Crea un nuevo párrafo. Aunque este método de centrar imágenes ha quedado obsoleto, todavía funciona en muchos navegadores. Sin embargo, recomendamos usar CSS para mantener el sitio funcional cuando los navegadores dejen de admitir el atributo especificado. Recuerda que el atributo alinear centrará la imagen solo dentro del elemento que la rodea (por ejemplo, dentro de las etiquetas p> / p> o div> / div>). Como ejemplo, en el archivo HTML, crearemos un nuevo párrafo agregando p> en una línea separada.
2. 2 Agrega código HTML para la imagen. Ingrese el siguiente código después de la etiqueta p>... Utilice este ejemplo como guía:

   p> img src = "perro.webp" alt = "imagen" align = "medio">

   • En lugar de perro.webp sustituya el nombre del archivo de imagen, y después de "alt" ingrese la descripción de la imagen.
   • El atributo del medio le dice al navegador que muestre la imagen en el centro de la página.
3. 3 Cierre la etiqueta de párrafo. Para hacer esto, agregue / p> después de la etiqueta de imagen. El código terminado debería verse así:

   p> img src = "perro.webp" alt = "imagen" align = "medio"> / p>

4. 4 Guarde sus cambios. Esto centrará la imagen.