¡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.
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;
}
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;
}
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;
}
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.
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>
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.
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!
¿Quieres poner texto detrás de un video? Aprende cómo con CapCut en este sencillo tutorial…
Aprende a crear voces con IA sorprendentemente reales para vídeos, podcasts y más. Lee nuestro…
TikTok se reinventa con TikTok Notes: una app de fotos y estilo de vida. Conoce…
¡Descubre Haiper! La alternativa gratuita a Sora de OpenAI para crear vídeos increíbles. Fácil de…
¿Buscas una alternativa a ChatGPT? Mistral AI y su chatbot Le Chat ofrecen una experiencia…
Más que un resumen: Adobe AI Assistant te ayuda a navegar y comprender PDFs con…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios
Muy bueno!
Gracias!
¿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!