#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    54
    Rep Power
    2

    CSS - How to center multiple images


    I have 3 images (3 small cloud images). I want to align them horizontally and center.

    Please advice how to do this. I am able to do it with one image but when it comes to multiple images, it ends up center but vertically aligned. My CSS code as follows:

    Code:
    <html>
    <head>
    <style>
    img {
    display:block;
    margin-left: auto;
    margin-right: auto; 
    }
    </style>
    </head>
    
    <body>
    <img src="/images/cloud1.gif"/>
    <img src="/images/cloud2.gif"/>
    <img src="/images/cloud3.gif"/>
    </body>
    
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    18
    Rep Power
    0
    I would try making a containing div that is the width you need to hold the three image. Like

    #images{width:600px; margin:0 auto;}

    And change your img{stuff} to:

    .imgfloat{float:left;}

    then, in your html,

    <div id="images">
    <img class="imgfloat" src="/images/cloud1.gif"/>
    <img class="imgfloat" src="/images/cloud2.gif"/>
    <img class="imgfloat" src="/images/cloud3.gif"/>
    </div>

IMN logo majestic logo threadwatch logo seochat tools logo