WordPress.org

Support

Support » How-To and Troubleshooting » Image alignment

Image alignment

  • phiegeeless

    @phiegeeless

    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Nickybbb

    @nickybbb

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

    @phiegeeless

    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;

    Michael

    @alchymyth

    Forum Moderator

    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?

    phiegeeless

    @phiegeeless

    Michael

    @alchymyth

    Forum Moderator

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image alignment’ is closed to new replies.
Skip to toolbar