[Solved] Post Images Won't Center Despite CSS

[johnOHFS]

OK. So, I built my own WP theme completely from scratch (www.ourhomefromscratch.com) and I’m having issues getting the post images to center using the aligncenter class, despite calling it out in the CSS. Most of the time I’m using images that are close to the total width of the main post area, so you can’t really tell it’s not centered. BUT, when I add smaller images, they are clearly aligned left. My work around for this has been to center them using HTML center commands.

I’m attaching my CSS for reference. Note that I’m using CSS with fluid grid layout for mobile.

My CSS:

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; } }

The post content sits in a #main div, which is styled:

‘#main { clear: none; float: left; margin-left: 4%; width: 63%;

}’

Any help would be greatly appreciated!!

[johnOHFS]

Thanks for the quick reply. I’ll try that tonight.

[johnOHFS]

Ok, so I looked at my CSS and I don’t have a gpbo.gridcontainer id tag. I have this:

.gridContainer {
width: 88.5%;
max-width: 1000px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
background-color:#FFF;

I tried messing around with what you suggested and didn’t get any results. Any other suggestions?

[johnOHFS]

Ok, fixed it. THANKS! The margin: 0 auto; is what worked. I forgot the gpbo is a plugin. Much appreciated!

[Author]

Posts