Centering an image

I've had the same problem Christine!

Centering images is a bit tricky. This is a workaround until we find a better solution:

Insert the image with the image button. Then change into HTML mode and ad this to the <img> tag:

style="float: none; display: block; margin-left: auto; margin-right: auto;"

So, for example, the entire code would look like this:

<p><img style="float: none; display: block; margin-left: auto; margin-right: auto;" alt="my cool image" src="/static/uploads/en/module/text/2011/06/01/2011-06-01_18-29-06_375.288x287.png" /></p>

Thanks!

Just a little short-cut: float: none; display: block; margin: 0 auto;

and shorter gain: float:none; display:block; margin:auto;

*lol*

Y'all rock.

Thanks Hans and Simon. :)

Is there a reason we can't use <p align="center"></p> here? Sorry for the silly question. I know absolutely nothing about the back end stuff.

Yeah! Thanks for the info! 

Hi Christine, that's not a silly question at all!!

The "problem" ist, that by default, all images inside a text-module are floating left. This is done by a css class. Thus, if you only use the img-tag <img ... />, it is as if you used <img style="float: left" ... /> Now, the "float:left"-part overrides the center alignment and th epicture sticks on the left side.

You can also use <p style="text-align: center"><img src="..." style="float:none;"></a>. That's how I do it. Or you can simply use an image module in between two text modules. Same result.

Right now, I'm not 100% sure, if align="center" gets filtered out, because actually that's not fully valid xhtml. But I'm pretty sure, you can use it anyways. In general, we try to create valid xhtml, to make it easier for Google to index all articles. But Google will have no trouble at all with the align-attribute. Huhh, lot's of tech-talk :)

Oh Geez, looks like I'll be out of my comfort zone for awhile. I've been using <p align= "center"> for ages.

Oh gee, you're right - I just checked: The classical align-attribute is actually filtered out.

Well, inline-styles are not that different and more flexible. Here is how it works:

align="center" is now style="text-align:center"

align="justify" is now style="text-align:justify"

align="right" is now style="text-align:right"

Almost the same :)

Well I am being totally thick now, because I cannot make it work

Hey AJ, if you like, post your article's URL here, and we'll fix it for you.

How I do it: Upload the image, switch to HTML-mode and insert this style into the <img>-tag: style="float: none;". Make sure, the <img>-tag is inside a <p>-tag or a <div>-tag. Then switch back to the text editor, select the image and click on the center alignment button.

Hey - I did it!

Thank you 

Hey SimonWizz - could you give us a complete sample code where all we have to do is exchange the image URL? Please bold the part that we have to exchange to show our own picture. 

I need a final version of this trick for our upcoming FAQ page. Thanks.

Hey all....I found an easy work-around!

insert the image, use the center button, THEN click the indent button! I 'indented' 3 times for an image, and wall-ah, it's centered :)