How to Align Image to the Right in CSS

1. Use the float and clear Properties to Align an Image to the Right in One Line in CSS
2. Use the display and margin-left Properties to Align an Image to the Right in One Line in CSS

This article will discuss some methods to align the image to the right in CSS.

Use the float and clear Properties to Align an Image to the Right in One Line in CSS

We can use the float property to specify the floating position of the element in CSS.

For instance, when we insert an image in HTML and write a paragraph below the image, we can make the image float to the left or right of the paragraph. In such a manner, we can make the text appear beside the image.

We can set the float property to right to align the image to the right of a paragraph in CSS. But, if we have to push the paragraph below the image, the clear property will come in handy.

The property defines the flow of the element below the floated element. The element will be pushed below the right floated image when using the right option for the clear property.

Thus, we can right-align an image and start the paragraph from the next line. There will be a blank space left to the left of the image.

For example, insert an image using the img tag in HTML. Next to the img tag, write a p tag and fill some text in it.

Select the img tag in CSS and apply the float property. Set the option right to the float property. Next, select the p tag and set the clear property to right.

Here, the image will be aligned to the right of the webpage. There will be no text beside the image.

If we had not used the clear property, the text would appear on the left side of the image. We pushed the text below the image using the clear property.

We can also set the option both for the clear property. It will push the next element below the left and right floated elements.

Example Code:

<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 the display and margin-left Properties to Align an Image to the Right in One Line in CSS

In this method, we will discuss another way of aligning the image to the right and pushing the text to another line.

We can achieve our goal using the display and margin-left properties. We can use the margin-left property to set the margin to the left of the image and push the image to the right on the webpage.

We can achieve it with the auto option. We can force the text to the next line by setting the image as a block element. We can do it with the display property.

In this example, we will use the HTML structure used in the first method. For instance, select the img tag and set the margin-left property to auto. Then, apply the block option to the display property.

Here, the auto option will set the left margin to the image. The image will take the space according to its size.

Then, the browser will calculate the remaining space and set that space as the left margin. Consequently, the image is right-aligned.

Setting the display property to block will make the block-level element. This means that the image will occupy the whole line.

The next element to the image will be pushed to the following line. Hence, we can use the display and margin-left properties to the right to align the image and move the text to the following line.

Example Code:

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