WordPress.org

Ready to get started?Download WordPress

Forums

Image alignment (6 posts)

  1. phiegeeless
    Member
    Posted 3 years ago #

    Hi folks - as you can see on the unfinished site I am struggling to center the image or is it the container? the theme is twenty ten. I have tried loads of tweaks within css but none seem to work. Help!

  2. Nickybbb
    Member
    Posted 3 years ago #

    try this in your css:

    img.centered {
        display: block;
        margin-left: auto;
        margin-right: auto;
    	border: 0px;
    }
    
    img.alignright {
        padding: 4px;
        margin: 0 0 2px 7px;
        display: inline;
    	border: 0px;
    }
    
    img.alignleft {
        padding: 4px;
        margin: 0 7px 2px 0;
        display: inline;
    	border: 0px;
    }
    
    .alignright {
        float: right;
    }
    
    .alignleft {
        float: left;
    }
  3. phiegeeless
    Member
    Posted 3 years ago #

    Not worked, as you can see, have I made mistake? see code below
    #content img {
    margin: 0;
    height: auto;
    max-width: 940px;
    width: auto;

    }
    #content .attachment img {
    max-width: 900px;
    }
    #content .alignright,
    #content img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    border: 0px;
    }
    #content .alignleft,
    #content img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    border: 0px;
    }
    #content .aligncenter,
    #content img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0px;
    }
    #content img.alignleft {
    float: left;
    }
    #content img.alignright {
    float: right;
    }
    #content img.aligncenter {
    margin-bottom: 12px;

  4. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    twenty ten already comes with the styles for image alignment - therefore my guess, that you have changed something in style.css of the theme, that stops the application of styles (happens easily, even with small typing errors)

    can you re-post a link to your site?

  5. phiegeeless
    Member
    Posted 3 years ago #

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    #content {
    	margin: 0 100px 0 20px;
    }

    find this style in style.css and set the right margin to 0 (zero), i.e. change the 100px to 0px

    if this makes problems in other pages, then don't make the change, and add a new style after the one above:
    .home #content { margin-right: 0px; }

Topic Closed

This topic has been closed to new replies.

About this Topic