html - 水平对齐图像 CSS

Question

我想水平对齐我的三个图像而不是垂直对齐什么是最简单的方法来实现这一点？例子

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

#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}

Answer 1

inline-block像这样显示 div ：

#christmas_promotion_boxes div {
  display: inline-block;
}

小提琴

Answer 2

您需要包含要浮动的图像的 div。

将此部分代码添加到您的 css 中：

#christmas_promotion_boxes > *{
    float:left;
}

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

Answer 3

当我有内联元素时，我总是将它们放在 ul 中并显示 li 的内联。这样你就不必担心浮动任何东西，而且它更具可扩展性。

<ul>
  <li id="christmas_promo_1"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
  <li id="christmas_promo_2"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
  <li id="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;
}

Answer 4

与@zazvorniki 接受的答案略有不同：

<div class="christmas_promotion_boxes">
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
    <img src="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/

确保width所有图像的宽度总和更大。

Answer 5

添加这个

#christmas_promotion_boxes div{
float: left;

}