3.24.2019

Mini - Tuto: ¿Cómo centrar imagen?

¡Hola! Les dejo un mini - tuto, que arreglando un blog para la escuela vi que aunque fuera algo sencillo no lo sabían hacer así que aquí está como centrar una imagen con HTML y CSS.

1. Cómo centrar una imagen usando sólo HTML.


<center>
     <img src="image.png" alt="Image">
</center>


2. Cómo centrar una imagen usando CSS.

Aquí tendremos código HTML y código CSS. Empezamos viendo el HTML.

<img class="centrado" src="Image.png" alt="Image">

Hemos puesto una clase a la imagen, llamada centrado, y que nos servirá para luego darle estilo en el CSS. A continuación está el código para centrar la imagen.

  .centrado{
margin:10px auto;
display:block;
    }

Por último, hacemos que el elemento se muestre en bloque, y le damos un margen automático (es suficiente con que el margen sea automático a los lados, arriba y abajo o puedes poner el que quieras). Ten en cuenta que si la imagen ocupa todo el ancho no se verá centrada.