Wordpress: images not centered.

dinneenp

Hi,
For some posts/pages the image isn't centered.
I've tried align center, none etc. It only occurs for some posts, regardless of size
Here are some examples:
http://www.photoblog.ie/
http://www.photoblog.ie/archives/1367

Still large image but not effected:
http://www.photoblog.ie/archives/1380

Thanks,
Pa.

Trojan

Doesn't look like a WordPress issue.

In the Catalunya image your image code reads

img class="alignnone size-full wp-image-1368"

This isn't actually centered, see the class=alignnone means no alignment - what you need there is "aligncenter" if you want it centred, which is set if you use the checkbox "center" here:



However!

Secondly, even if you do use "aligncenter", it only aligns it in the centre of the current div, and if your image is too large, it's still going to overflow.

Summary: to fix this you should: 1) resize your image, 2) use the Alignment: Center option.

dinneenp

Thanks, but how come some images that are oversized too are centered?
I've played around and if I change the height to 542 it'll be centered but then have the border around it (that's the style of the theme). http://www.photoblog.ie/test6
So I have to experiement until the border won't appear but pic will still remain centered.
Thanks.

Freemancon

I'm not sure why but it seems that most themes don't include the wordpress CSS that allowed the alignment tools that Trojan showed you to work. I've seen this before and to solve it I went to the Wordpress Classic theme and copied a section of CSS that made these controls work in the theme. I've saved you the trouble by including the relevant CSS below. If you paste this into your style.css file I think you'll be pleased with the results.

Add this CSS to your style.css file in your active wordpress theme.

/* Captions & aligment */
.aligncenter,
div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

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

.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
}
/* End captions & aligment */