La guía definitiva para centrar una imagen en CSS y HTML5
- Cómo centrar una imagen en CSS con las propiedades <display> y <margin>
- Alinear imágenes al centro con CSS con FLEXBOX
- Cómo centrar imágenes verticalmente
- Centrar una imagen en un div horizontal y verticalmente
- Cómo centrar una imagen con Bootstrap
- Centrar una imagen en HTML con <center> OBSOLETO
- Errores a la hora de centrar una imagen en CSS
¡Buenas amigos! Hoy os traigo una sencilla guía en la que aprenderás fácil y rápidamente a centrar una imagen en CSS.
Esta es una tarea que vas a realizar con frecuencia en tu vida como desarrollador web, así que voy a enseñarte diferentes métodos para que seas tú la que más se adapte a tus necesidades.
En primer lugar veremos cómo conseguir alinear una imagen con CSS, posteriormente lo haremos con Flexbox y finalmente, y si te gustan los frameworks, te enseñaré a realizarlo con Bootstrap.
Cómo centrar una imagen en CSS con las propiedades <display> y <margin>
Las imágenes debemos de tratarlas como bloques, en vez de en línea como ocurre en el caso de los textos.
Para ello existe una propiedad llamada display:block; y al igual que ocurre con cualquier otro tipo de bloques le asignaremos un margen automáticos para centrar la imagen en pantalla.En primer lugar voy a incluir la imagen dentro de una clase llamada “centrar” en mi código HTML tal y como ves a continuación, y que me servirá para posteriormente darle un estilo en nuestro CSS y conseguir centrar la imagen.
<img class="centrar" src="tuimagen.png" alt="Imagen de Prueba">En nuestra hoja de estilo lo que haremos será lo siguiente:
.centrar{
margin:auto;
display:block;
}Alinear imágenes al centro con CSS con FLEXBOX
Otra forma que tenemos de centrar cualquier imagen en CSS, como puede ser el caso de un logotipo, es mediante Flexbox, algo que es muy rápido y fácil de conseguir.
Para centrar la imagen lo primero que haré será insertar nuestra imagen dentro de una etiqueta <div>, tal y como puede ver en el código inferior:
<body>
...
<div id="logo-contenedor">
<img id="imagen1" src="logo.png">
</div>
...
</body>A continuación utilizaremos dos selectores CSS para que la imagen quede centrada:
#logo-contenedor {
display: flex;
align-items: center;
justify-content: center;
}
#logo-container>img {
max-width: 50%;
border: 2px solid red;
}Cómo centrar imágenes verticalmente
Para esta tarea vas a necesitar en primer lugar hacer uso de la etiqueta <div> que funcionará como un contenedor al que asignarás un alto fijo, y colorcar en su interior tu imagen tal y como veremos a continuación:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Centrar una imágen verticalmente</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<p>Texto Superior</p>
<div class="img-centro-vertical">
<img src="tu-imagen.png" alt="Alineación Centrada Verticalmente de una Imagen">
</div>
<p>Texto Inferior</p>
</body>
</html>En tu hoja de estilos CSS debes de copiar el siguiente código, con la única salvedad de cambiar la altura (height: 700px) para ajustarlo a tus necesidades.
.img-centro-vertical{
display: table-cell;
height: 700px;
vertical-align: middle;
}Centrar una imagen en un div horizontal y verticalmente
Por último y para finalizar esta guía te voy a enseñar a centrar una imagen o contenido horizontal y verticalmente dentro de un div o contenedor padre mediante estilos CSS.
Lo primero que haré será incluir el siguiente código HTML con la imagen que quiero centrar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="StyleSheet" href="style.css" type="text/css" />
<title>Document</title>
</head>
<body>
<div class="content">
<img src="logo.png" />
</div>
</body>
</html>A continuación voy a teclear el siguiente código en mi hoja de estilos:
.content {
width:600px;
height:400px;
line-height:400px;
margin:0px auto;
text-align:center;
background-color:#CCCCCC;
}
.content img {
vertical-align:middle;
}Una idea sería utilizar el atributo vertical-align, pero esto esto únicamente es válido si quieres alinear una imagen con texto contiguo.
Por ello en primer lugar creo el atributo line-height para el contenedor padre sea igual a su altura, y así centrar el contenido horizontalmente mediante text-align:center ,y finalmente, centro la imagen verticalmente con vertical-align: middle.
Cómo centrar una imagen con Bootstrap
Con Bootstrap es muy realmente sencillo centrar cualquier imagen. Únicamente tendrás que utilizar dos clases en las imágenes. Estas son .d-block (display-block) y .mx-auto (margin-auto).
<div class="container">
<h1>Imagen centrada y responsive</h1>
<img src="logo.png" alt="Logotipo" style="width:70%" class="mx-auto d-block">
</div>Centrar una imagen en HTML con <center> OBSOLETO
Finalmente vamos a ver cómo alinear una imagen al centro en HTML sin utilizar CSS utilizando la etiqueta <center>.
Éste método ha quedado obsoleto y no es recomendable utilizarlo ya que aunque puede que en algunos navegadores funcione, la norma es que pronto no sean compatible y por tanto dejen de hacerlo.
Aún así, y si sientes curiosidad, voy a dejarte la sintaxis que únicamente usa solo HTML:
<center>
<img src="tu-imagen.jpg" alt="Imagen alineada al centro con html" />
</center>Centrar una imagen es parte del formato de una página web, por ello la forma correcta de dar formato es usando CSS (Hojas de estilo), tal y como vamos a ver a continuación.
Errores a la hora de centrar una imagen en CSS
Un fallo muy común con el que te puedes encontrar es que la ruta de la imagen no sea la correcta, por lo tanto es importante asegurarse donde se encuentra guardada dicha imagen.
También es frecuente que olvides poner algún punto y coma o cerrar con las llaves de tu código CSS, algo que también provocará fallos en tu documento.
Cuidado con utilizar la etiqueta <center> de HTML que aunque aún puede funcionar ha sido declarada obsoleta, y por lo tanto es recomendable no utilizarla.
Espero que te haya resultado de gran utilidad esta guía de CSS para centrar imágenes y ahora solo queda que tú las pongas en práctica.
Si te ha gustado recuerda compartir en tus redes sociales. ¡Gracias!
-
-
Emilio Gutierrez Ruiz dice:
¿Hay una instrucción en html para centra TODAS LAS IMAGENES, y no tener que hacerlo una a una.
Si ñahy cual es
Gracias-
Buenas! Pues mira te doy una opción que quizás te pueda ser de utilidad:
El HTML:
Crea un etiqueta que se llame "container" y agrega los enlaces a las imágenes.
EL CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Esto permite que las imágenes se ajusten a la pantalla */
gap: 10px; /* Esto crea un espacio entre cada imagen */
}.container img {
max-width: 100%; /* Esto asegura que las imágenes no se desborden */
}Espero que te sea de utilidad. ¡Gracias!
-
Emilio Gutierrez Ruiz Deja una respuesta
Muy bueno!