image alignment in sidebar (3 posts)

  1. JuliaMueller
    Posted 3 years ago #

    Hi there,

    I would like to align the first photo in my sidebar to the left instead of middle - my site: http://www.theroastedroot.net/. I added align-left code to my custom css sheet and it hasn't been working out for me. Any suggestions?



  2. WPyogi
    Forum Moderator
    Posted 3 years ago #

    That image has aligncenter class assigned inline:

    <img class="aligncenter" width="200" height="180" src="http://www.theroastedroot.net/wp-content/uploads/2012/10/juliam.jpg">

    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.)

  3. chomachomachoma
    Posted 3 years ago #

    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="http://www.theroastedroot.net/wp-content/uploads/2012/10/juliam.jpg" class="aligncenter" width="200" height="180">

    You will need to change it to

    <img src="http://www.theroastedroot.net/wp-content/uploads/2012/10/juliam.jpg" class="alignleft" width="200" height="180">


    <img src="http://www.theroastedroot.net/wp-content/uploads/2012/10/juliam.jpg" 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.

Topic Closed

This topic has been closed to new replies.

About this Topic