Create topic New topics

Forum

Help me, please!

Centering an image

Christene
Posts: 74
Message
on 06/01/2011

I can't seem to be able to center an image in a text module. Is there a trick to it?

-Christene
mandeesears
Posts: 120
Message
on 06/01/2011

I've had the same problem Christine!


Lovin' Wizzley! Come see my newest Wizz at Patio Decorating Ideas | Color Schemes.
nightowl
Admin
Posts: 490
Message
on 06/01/2011

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>

 


SEO Praxis: Specializing in WordPress Hosting and Small Business Web Design.
Christene
Posts: 74
Message
on 06/01/2011

Thanks!


-Christene
Online
Hans
Admin
Posts: 106
Message
on 06/01/2011

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


My Tip: Public domain images on Pixabay.com :-)
Simon
Admin
Posts: 578
on 06/01/2011

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

*lol*

Christene
Posts: 74
Message
on 06/01/2011

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.


-Christene
mandeesears
Posts: 120
Message
on 06/01/2011

Yeah! Thanks for the info! 


Lovin' Wizzley! Come see my newest Wizz at Patio Decorating Ideas | Color Schemes.
Simon
Admin
Posts: 578
on 06/01/2011

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 :)

FlowerGardener
Posts: 27
Message
on 06/02/2011

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

Simon
Admin
Posts: 578
on 06/02/2011

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 :)

AJ
Posts: 251
Message
on 06/02/2011

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

Simon
Admin
Posts: 578
on 06/02/2011

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.

AJ
Posts: 251
Message
on 06/02/2011

Hey - I did it!

 

Thank you 

chefkeem
Posts: 3100
Message
on 06/02/2011

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.


Achim "Chef Keem" Thiemermann is the co-founder of a pretty cool new platform called...um...er...oh, yeah - Wizzley.com.
FlowerGardener
Posts: 27
Message
on 06/02/2011

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 :)

Loading ...
Error!