Vertically Centering Soapbox Images

[lmmolitor 0]

I'm finding that the images I use for my soapboxes seem to be aligning to the bottom of the image area and I'd prefer at time they that are center aligned vertically ... how do I accomplish this? Here's an example page I"m working on as we speak http://www.greenbankdevelopment.com/communities/

[Kate 3]

Hi Liz - Unfortunately the vertical-align property for CSS isn't for these types of elements. (It can be used for text...) You could use a "table" technique (via CSS), however, that's not supported in all browsers. So, perhaps just adding a top margin would work in this case? Let me know what you think. (There are a few other options, but they generally require some sort of HTML modifications and usually at least an intermediate knowledge of CSS.)

[lmmolitor 0]

I need the simplest option ... when you say add margin, is there a place in the tool to do that or do i need to add the margin outside of PlatformPro and then upload it back in?

[bryan-hadaway 3]

Actually, the best way to handle this is to make all the images the same size. Not stretch or skew them, but to add a transparent margin and save them as png. If you're not familiar with graphic editing you might try this free editor: http://www.gimp.org/ Thanks, Bryan

[Kate 3]

Hey Liz - I apologize: I should've taken a look at the CSS before I spoke. In this case you can take advantage of the vertical align property (via CSS) as the image is treated as text. In fact, this is currently what's being done. However, it's set to

vertical-align:bottom

. So, try adding this to your custom code (CSS):

#soapbox .fboxgraphic img{vertical-align:center !important;}

[lmmolitor 0]

Hey Kate - thanks for the tip ... i tried adding the custom code as you suggested, but it doesn't appear to have worked, I guess i'll just go back and per Bryan's input resize the images to be the same thanks!