Problem with image centering

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
6/29/2012 11:41:11 AM
Gravatar
Total Posts 62

Problem with image centering

I've been struggling with image centering which seems like an easy thing to do. Editor doesn't allow you to center an image, so I created custom style:

img.centerimage{
display: block;
    margin-left: auto;
    margin-right: auto; }

It appeared to work on one machine using Chrome and IE, but then I tried on a different one and image isn't centered. What's the best approach to make sure that centering works? 

 

Thank you!

7/2/2012 11:04:47 AM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Problem with image centering

I just checked what our webmaster is using for a centered image, and it matches yours, although she added it as inline style directly on the image (img style="margin-right: auto; margin-left: auto; display: block;"). This is working for us across all browsers, as far as I know.

The only reason I can think yours might not be working is if the previous CSS is cached on that secondary system. You can force CSS to be reloaded on the other workstation by going to Administration, Advanced Tools, Design Tools, Cache Tool, then click the Reset Skin Version Guid button.

Hope that helps,

Jamie

7/11/2012 7:07:28 PM
Gravatar
Total Posts 62

Re: Problem with image centering

Hi, Thank you for help. Cache was partially a problem, for some reason it gets enabled after sometime, but my main issue is that I am not able to center the image using slider functionality. Is there any trick to it?

7/11/2012 7:27:32 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Problem with image centering

I'm not sure what you mean by "slider functionality", but this CSS technique for centering images is the only one I'm aware of.

Images are inline elements by default, so that text will flow around them. That is why they don't allow centering unless they are overridden to be a block element.

Jamie

7/11/2012 9:38:45 PM
Gravatar
Total Posts 2253

Re: Problem with image centering

Hi,

The problem you're facing is created by the slideshow feature of the HTML module. It uses jQuery Cycle which positions each slide element absolutely and then places them on the left at 0 and the top at 0. That will mess up any kind of centering if you don't have your images wrapped in an element with a width equal to the space you want the image centered in. Take this for example:

<div style="text-align: center; width: 715px;">
    <img alt="" src="/Data/Sites/1/media/hydrangeas.jpg" style="width: 250px; height: 188px;" />
</div>
<div style="text-align: center; width: 715px;">
    <img alt="" src="/Data/Sites/1/media/img_1994.jpg" style="width: 250px; height: 187px;" />
</div>
<div style="text-align: center; width: 715px;">
    <img alt="" src="/Data/Sites/1/media/img_2029.jpg" style="width: 250px; height: 187px;" />
</div>

This will center the images in a space that is 715px wide. You could place a class on the divs and then set the style in your CSS instead of using inline style.

This should get you going in the right direction, let me know if you have further questions.

Edit: you can see this working at https://demo.mojoportal.com/new-page.aspx until the demo site is reloaded or someone changes my example.

HTH,
Joe D.

7/11/2012 11:24:58 PM
Gravatar
Total Posts 62

Re: Problem with image centering

Thanks Joe! It solved my issue, I can't believe it was so simple after spending hours with it! blush

You must sign in to post in the forums. This thread is closed to new posts.