Aprende cómo alinear una imagen en HTML usando CSS. Ya sea si quieres alinear la imagen a la izquierda, a la derecha, o solo centrarla. Así que sigue leyendo para aprender a usar CSS para alinear una imagen al lado que desees.
Existen dos formas directas para poder alinear imágenes en HTML usando CSS:
- Usando la propiedad de CSS float
- Usando la propiedad de CSS text-align
Cómo alinear imágenes usando float
Para alinear imágenes usando CSS, podemos usar la propiedad float. Como su nombre lo indica, esta propiedad permite hacer “flotar” a la imagen. Esto logrará que puedas hacer que flote a la izquierda o la derecha de un texto, y el texto quedará alrededor de la imagen.
Los valores que pueden ser usados son: left, right.
Alineación a la izquierda:
Para alinear una imagen a la izquierda, podemos agregarle una clase a la imagen en HTML. En este caso le agregué la clase “alinear-izquierda”. Así podrás volver a utilizar esta clase en cualquier imagen que desees alinear a la izquierda.
<img src="url-imagen.jpg" class="alinear-izquierda">
Y el CSS necesario será el siguiente:
.alinear-izquierda{
float: left;
}Y así de simple, tendrás tu imagen alineada la izquierda. Ten en cuenta que tu imagen flotará a la izquierda de cualquier elemento.
Alineación a la derecha:
Para alinear una imagen a la derecha, podemos agregarle una clase a la imagen en HTML. En este caso le agregué la clase “alinear-derecha”. Así podrás volver a utilizar esta clase en cualquier imagen que desees alinear a la derecha.
<img src="url-imagen.jpg" class="alinear-derecha">
Y el CSS necesario será el siguiente:
.alinear-derecha{
float: right;
}Y así de simple, tendrás tu imagen alineada la derecha. Ten en cuenta que tu imagen flotará a la derecha de cualquier elemento.
Cómo romper el float en CSS
Cuando usamos la propiedad float en CSS, a veces solo queremos hacerlo para ciertos elementos. Por eso, es necesario saber cómo “romper” el float. Se explica mejor con un ejemplo:
Digamos que tenemos una imagen alineada a la izquierda de un texto. Sin embargo, queremos comenzar un nuevo párrafo al final de la imagen. Para ello, debemos “romper” el float con el nuevo párrafo, para que este ya no esté al rededor de la imagen.
See the Pen
“Romper” el float en HTML/CSS by regardis (@regardis)
on CodePen.
Como puedes ver, si no rompemos el float, todos los elementos seguirán flotando a la derecha de la imagen. Entonces, la forma de romper el float es usando el siguiente css:
.romper-float{
clear: both;
} Podemos aplicar la clase .romper-float a cualquier elemento, por ejemplo a un <p>, <br> o hasta a un heading o encabezado.
Cómo alinear imágenes usando text-align
Para alinear imágenes usando CSS, también podemos utilizar la propiedad text-align. Realmente, esta propiedad es para alinear el texto dentro de un elemento. Por tanto, al usar esta propiedad para una imágen, deberás encerrar la imagen en un elemento como un <div>.
Los valores que puede ser usados son: left, right, center.
Alineación a la izquierda:
Para alinear una imagen a la izquierda, podemos agregar una clase al <div> contenedor en HTML. En este caso le agregué la clase “alinear-izquierda”. Así podrás volver a utilizar esta clase a cualquier contenedor para alinear su contenido a la izquierda.
<div class="alinear-izquierda"> <img src="url-imagen.jpg"> </div>
El CSS necesario será el siguiente:
.alinear-izquierda{
text-align: left;
}¡Y eso es todo! Como hemos aplicado la alineación al <div>, esto quiere dedir que todo su contenido tendrá la misma alineación.
Alineación a la derecha:
Para alinear una imagen a la derecha, podemos agregar una clase al <div> contenedor en HTML. En este caso le agregué la clase “alinear-derecha”. Así podrás volver a utilizar esta clase a cualquier contenedor para alinear su contenido a la derecha.
<div class="alinear-derecha"> <img src="url-imagen.jpg"> </div>
El CSS necesario será el siguiente:
.alinear-derecha{
text-align: right;
}¡Y eso es todo! Como hemos aplicado la alineación al <div>, esto quiere dedir que todo su contenido tendrá la misma alineación.
Alineación al centro:
Para alinear una imagen al centro, podemos agregar una clase al <div> contenedor en HTML. En este caso le agregué la clase “alinear-centro”. Así podrás volver a utilizar esta clase a cualquier contenedor para centrar su contenido.
<div class="alinear-centro"> <img src="url-imagen.jpg"> </div>
El CSS necesario será el siguiente:
.alinear-centro{
text-align: center;
}¡Y eso es todo! Como hemos aplicado la alineación al <div>, esto quiere dedir que todo su contenido tendrá la misma alineación.
Con la propiedad text-align, también puedes aprender cómo justificar texto.
Si tienes alguna duda, por favor déjanos un comentario para ayudarte.
