Support » Themes and Templates » image alignment in sidebar

Viewing 2 replies - 1 through 2 (of 2 total)
  • That image has aligncenter class assigned inline:

    <img class="aligncenter" width="200" height="180" src="">

    So that overrides external CSS. Check the settings on the image itself.

    (Per your earlier post, if you want to put text on the side, you’ll likely need to float the image left.)

    While you do indeed need to define the alignleft property in CSS, you must apply to the object also. The image I see on your sidebar currently has the “aligncenter” class applied to the img. To float the image to the left you can replace the “aligncenter” class with “alignleft”. OR you can just remove it all together and the image naturally float left by default.

    So where you have…

    <img src="" class="aligncenter" width="200" height="180">

    You will need to change it to

    <img src="" class="alignleft" width="200" height="180">


    <img src="" class="" width="200" height="180">

    I noticed that the properties “.alignleft”, “.aligncenter”, and “.alignright” (WP default float classes) are already defined so you should not need to change anything in your stylesheet to float the object. Just apply the class to the object. However, you may want to add some margins to the properties so text and stuff doesn’t run into the side of it.

    Where you have…

    .alignleft, .left, img[align="left"] { float: left; }
    .alignright, .right, img[align="right"] { float: right; }
    .aligncenter, .center, img[align="middle"] { display: block; margin-right: auto; margin-left: auto; float: none; clear: both; }

    I would change to…

    .alignleft, .left, img[align="left"] { float: left; margin:0 15px 15px 0; }
    .alignright, .right, img[align="right"] { float: right; margin:0 0 15px 15px; }
    .aligncenter, .center, img[align="middle"] { display: block; margin:0 auto 15px auto; float: none; clear: both; }

    Or whatever margins you are using in your design. Hope it makes sense.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘image alignment in sidebar’ is closed to new replies.