Forums

[resolved] Images won't center (4 posts)

  1. leelalove
    Member
    Posted 1 year ago #

    Hello ~ I am developing a website at http://www.bodyworker.org. Am trying to figure out how to make the post images center (checking "center" in the post writing window doesn't work). I researched this on the forum and see some answers, but nothing that I completely understood.

    I made the slideshow center at http://www.bodyworker.org/aloha-and-welcome/ by adding this code to Custom Includes (Suffusion theme):

    .portfolio-slideshow {
    text-align: center !important;
    }
    .slideshow-caption {
    text-align: center !important;
    }
    .slideshow-nav {
    text-align: center !important;
    }

    Would like to know what code I could include to make the image center at http://www.bodyworker.org/under-construction/.

    Thank you!

  2. Jay Hart
    Member
    Posted 1 year ago #

    Try wrapping the a tag and image portion in a div and give the image a margin: 0 auto; to center it.

    <div class="your-class"><a href="http://www.bodyworker.org/under-construction/yogafamilyonbeach/" rel="attachment wp-att-5"><img width="300" class="aligncenter size-medium wp-image-5" title="yogafamilyonbeach" src="http://www.bodyworker.org/wp-content/uploads/2011/08/yogafamilyonbeach-300x225.jpg" alt=""></a></div>

    I hope this helps!

  3. dkotter
    Member
    Posted 1 year ago #

    To center it you'd set the margin to this:

    margin: 0 auto;

    When you center an image in the WordPress editor, it adds a class to your image of aligncenter. So normally you'd use that class to center your images. But in your code you have a few other rules that are overriding that one, so you'll need to change the rule with the highest authority.

    In your case it is a rule that you're inserting in the head of the page. So you'll need to find this and change it:

    #content img {
       border: 8px solid #797E83;
       margin: 0 10px 5px 0;
       -moz-border-radius: 20px;
    }

    Again this is inserted in the head of the document, with a comment saying Custom CSS styles defined in options. So that makes me think it's inserted via your theme options page, maybe? But you'll need to change the above margin to be:

    margin: 0 auto 5px;

    and it should center.

  4. leelalove
    Member
    Posted 1 year ago #

    Thank you so much for the responses. I went to Suffusion theme Custom Includes and changed the code to: margin: 0 auto 5px;

    It is now centered

Topic Closed

This topic has been closed to new replies.

About this Topic