Align Images Horizontally Css

I want to align my three images horizontally instead of vertically what is the easiest way to achieve this? example

Solution 1:

Display the divs as inline-block like so :

#christmas_promotion_boxesdiv {
  display: inline-block;
}

Fiddle

Solution 2:

You need the div's containing the images to be floated.

Add this section of code into your css:

#christmas_promotion_boxes > *{float:left;
}

http://jsfiddle.net/tDfCR/5/

Solution 3:

When I have inline elements I always put them in a ul and display the li's inline. This way you don't have to worry about floating anything and it is much more scalable.

<ul><liid="christmas_promo_1"><imgsrc="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg"width="200"height="100"></li><liid="christmas_promo_2"><imgsrc="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg"width="200"height="100"></li><liid="christmas_promo_3><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200"height="100"></li></ul>

ul{
 width:5em
}

li{
 display:inline;
 list-style-type:none;
}

Solution 4:

Slightly different from @zazvorniki accepted answer:

<divclass="christmas_promotion_boxes"><imgsrc="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg"width="200"height="100"/><imgsrc="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg"width="200"height="100"/><imgsrc="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg"width="200"height="100"/></div>

.christmas_promotion_boxes {
    width: 1000px;
    margin: 0 auto 0 auto;
    display: inline-block;
}

http://jsfiddle.net/tDfCR/114/

Make sure the width is larger the sum all of width of all the images.

Solution 5:

add this

#christmas_promotion_boxesdiv{
float: left;

}

Share