1. Technology

Why won't text-align make my images align where I want them to?

By

Question Mark Key

Question Mark Key

Image courtesy hdoddema from StockXchng #619007.
Question: Why won't text-align make my images align where I want them to?
Vickie asks:
I have a piece of clipart on my page, a Christmas Tree ornament and I am trying to get the text to align anywhere, right, left, justify etc. I saw the following code in the lesson about align:

<p style="text-align: right;>
The text in this paragraph is aligned to the right side.
</p>

Can you please tell me what I am doing wrong? I have never been able to do the text/image correctly. The code to my image is:
<img src="Bulb_Blue_light.GIF" alt="PEACE ON EARTH, GOOD WILL TOWARDS MEN">
Answer:

The tricky thing about the text-align property is that you can only align text with it - you can't use it to move block-level elements like images. Some browsers will align images or tables with this property, but it's not reliable, as you've found.

To align images to the right or left, you need to use the CSS style "float"

So, to float your ornament image to the right you would write:

<img src="Bulb_Blue_light.GIF" alt="PEACE ON EARTH, GOOD WILL TOWARDS MEN" style="float:right;" />

Any text or other elements that follow that image will be on the left of the image.

©2014 About.com. All rights reserved.