right align an image using CSS HTML

Question

How can I right-align an image using CSS.

I do not want the text to wrap-around the image. I want the right aligned image to be on a li

Answer 1

Float the image right, which will at first cause your text to wrap around it.

Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.

Answer 2

My workaround for this issue was to set display: inline to the image element. With this, your image and text will be aligned to the right if you set text-align: right from a parent container.

Answer 3

To make the image move right:

float: right;

To make the text not wrapped:

clear: right;

For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.

Answer 4

There are a few different ways to do this but following is a quick sample of one way.

<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>

I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.

Answer 5

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
   ...text...
</div>    

jsFiddle.