Alinear imagen a la derecha en CSS

1. Utilice las propiedades float y clear para alinear una imagen a la derecha en una línea en CSS
2. Use las propiedades display y margin-left para alinear una imagen a la derecha en una línea en CSS

Este artículo discutirá algunos métodos para alinear la imagen a la derecha en CSS.

Utilice las propiedades float y clear para alinear una imagen a la derecha en una línea en CSS

Podemos usar la propiedad float para especificar la posición flotante del elemento en CSS.

Por ejemplo, cuando insertamos una imagen en HTML y escribimos un párrafo debajo de la imagen, podemos hacer que la imagen flote a la izquierda o derecha del párrafo. De esta manera, podemos hacer que el texto aparezca al lado de la imagen.

Podemos establecer la propiedad float a right para alinear la imagen a la derecha de un párrafo en CSS. Pero, si tenemos que empujar el párrafo debajo de la imagen, la propiedad clear nos vendrá bien.

La propiedad define el flujo del elemento debajo del elemento flotante. El elemento se empujará debajo de la imagen flotante derecha cuando se use la opción right para la propiedad clear.

Por lo tanto, podemos alinear a la derecha una imagen y comenzar el párrafo desde la línea siguiente. Quedará un espacio en blanco a la izquierda de la imagen.

Por ejemplo, inserte una imagen usando la etiqueta img en HTML. Junto a la etiqueta img, escriba una etiqueta p y complete algo de texto en ella.

Selecciona la etiqueta img en CSS y aplica la propiedad float. Establezca la opción right en la propiedad float. A continuación, seleccione la etiqueta p y establezca la propiedad clear en right.

Aquí, la imagen se alineará a la derecha de la página web. No habrá texto al lado de la imagen.

Si no hubiésemos utilizado la propiedad clear, el texto aparecería en la parte izquierda de la imagen. Empujamos el texto debajo de la imagen usando la propiedad clear.

También podemos configurar la opción both para la propiedad clear. Empujará el siguiente elemento debajo de los elementos flotantes izquierdo y derecho.

Código de ejemplo:

<img src="/img/DelftStack/logo.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nihil, vitae placeat molestias inventore, numquam eveniet illo optio, sint excepturi nam? Ut dolor ratione aut tenetur, a aliquid natus tempore!
</p>

img{
 float:right;
}

p{
 clear:right;
}

Use las propiedades display y margin-left para alinear una imagen a la derecha en una línea en CSS

En este método, discutiremos otra forma de alinear la imagen a la derecha y empujar el texto a otra línea.

Podemos lograr nuestro objetivo usando las propiedades display y margin-left. Podemos usar la propiedad margin-left para establecer el margen a la izquierda de la imagen y empujar la imagen a la derecha en la página web.

Podemos conseguirlo con la opción auto. Podemos forzar el texto a la siguiente línea configurando la imagen como un elemento de bloque. Podemos hacerlo con la propiedad display.

En este ejemplo, usaremos la estructura HTML utilizada en el primer método. Por ejemplo, seleccione la etiqueta img y establezca la propiedad margin-left en auto. Luego, aplique la opción block a la propiedad display.

Aquí, la opción auto establecerá el margen izquierdo de la imagen. La imagen ocupará el espacio según su tamaño.

Luego, el navegador calculará el espacio restante y establecerá ese espacio como el margen izquierdo. En consecuencia, la imagen está alineada a la derecha.

Establecer la propiedad display en block hará que el elemento sea de nivel de bloque. Esto significa que la imagen ocupará toda la línea.

El siguiente elemento de la imagen será empujado a la siguiente línea. Por lo tanto, podemos usar las propiedades display y margin-left a la derecha para alinear la imagen y mover el texto a la siguiente línea.

Código de ejemplo:

img {
 margin-left: auto;
 display: block;
}