Images not centered, even with CSS fix

Add the recommended CSS from the above post to your stylesheet’s theme.

Hi Esmi,

I actually tried that. I cut-n-pasted the recommended CSS from that post into Tropicala’s stylesheet, but it didn’t seem to work. Maybe I’m missing something?

Towards the bottom of Tropicala’s CSS file I found this code:

/* Image stuff for 2.6.1 */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

I replaced it with this, from that post I linked above:

img.centered, .aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}

This did not fix the problem. =(

The only other reference to images in the Tropicala CSS is the following random code:

img {
  border:0;
}

It’s because you’ve added the aligncenter class to the element holding the image…

The image is aligned center already anyway, but it’s sat inside another element, which is why you’re not seeing anything change..

Try changing this area in your stylesheet..

.wp-caption {
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f3f3f3;
  padding-top: 4px;
  margin: 10px;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

to…

.wp-caption {
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f3f3f3;
  padding-top: 4px;
  margin: 10px auto;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

So this..
margin: 10px;
becomes..
margin: 10px auto;

Basically just setting auto side margins to the element should center it as required.

t31os,

Thanks for that tip!

I tried your suggestion, and noticed that adding “auto” to the margin syntax DOES properly center images in IE and Firefox.

However, it unfortunately does not work in Safari. It also produces an unusual side effect that causes left- and right-aligned images to lose their margin (in all browsers), so text hugs right up against the image instead of having a buffer.

Ideas?

Perhaps that’s a side-effect of having the aligncenter class applied to that element at the same time, if you remember i mentioned that in my last reply to.

Remove the aligncenter class and see if anything changes…

Right now .wp-caption and .aligncenter are both applied to that element..

It might not help, but see what changes…

You could also just wrap a DIV around the element and do text-align:center on the DIV, it might be a quick fix.

<div style="text-align:center"> the whole image/caption box etc... </div>

The above example is done with inline styling (the style=”” part), just simply because it’s quicker to test… ?? No point making a whole CSS class for a few seconds of testing… that’s more files to edit.. ??

t31os,

I tried your second suggestion, removing the aligncenter class, but it didn’t fix the issue

To clarify, the captions on images center just fine below the image. It’s the images themselves that are not aligning to center.

What I can’t figure out if why, in the Visual tab of the post editor, the images show up properly aligned to center. But on the actual live page, they all left-align.

Right now .wp-caption and .aligncenter are both applied to that element..

I could be wrong but I think that’s the WP default handling for the [caption] shortcode.

@hive101: At this point, can I suggest that you validate your site? Some of the errors I’m seeing could both throw the CSS out of whack and cause display differences between browsers.