Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Wordpress: images not centered.

Options

Comments

  • Options
    #2
    Trojan
    Registered Users Posts: 16,402 ✭✭✭✭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:

    image-alignment.gif

    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.

    🎙️ The Recognized Authority Podcast



  • Options
    #3
    dinneenp
    Registered Users Posts: 8,108 ✭✭✭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.


  • Options
    #4
    Freemancon
    Registered Users Posts: 41 ✭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 */


Advertisement