Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
Like Tree1Likes
  • 1 Post By abduraooft

Thread: How to align pictures in wordpress sidebar widget correctly using CSS?

  1. #1
    Zox
    Zox is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question How to align pictures in wordpress sidebar widget correctly using CSS?

    Good day,

    I have question on how to align images in the sidebar of a wordpress website in the way shown in the picture:
    How to align pictures in wordpress sidebar widget correctly using CSS?-iconiligment.png
    I use the following code to display images in the sidebar:
    Code:
    <div>
    <img class="mainbutton" src="http://dev.sample.sample/wp-content/uploads/2014/06/MAIN-icon.jpg" width="75"></img>
    <img class="socialbutton" src="http://dev.sample.sample/wp-content/uploads/2014/06/facebook-icon.png" width="50"></img>
    <img class="socialbutton" src="http://dev.sample.sample/wp-content/uploads/2014/06/twitter-icon.png" width="50"></img>
    <img class="socialbutton" src="http://dev.sample.sample/wp-content/uploads/2014/06/google-icon.png" width="50"></img>
    </div>
    What I do not understand is how to align images with class "socialbutton" to left horizontally and to the middle vertically relatively to the image with class "mainbutton"?

    Can you please help me with this
    Thank you in advance.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <div class="buttons">
    <img class="mainbutton" src="http://dev.sample.sample/wp-content/uploads/2014/06/MAIN-icon.jpg" width="75"></img>
    <img class="socialbutton" src="http://dev.sample.sample/wp-content/uploads/2014/06/facebook-icon.png" width="50"></img>
    <img class="socialbutton" src="http://dev.sample.sample/wp-content/uploads/2014/06/twitter-icon.png" width="50"></img>
    <img class="socialbutton" src="http://dev.sample.sample/wp-content/uploads/2014/06/google-icon.png" width="50"></img>
    </div>
    Code:
    .buttons img {
    vertical-align:middle;
    text-align:right;
    clear:left;
    }
    .mainbutton{
    margin-right:50px;
    }
    Zox likes this.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Zox (06-16-2014)

  • #3
    Zox
    Zox is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    abduraooft , thank you very much - that helped a lot

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You may remove that clear:left; from .buttons img. It's not required.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •