Question

我想水平对齐三幅图像而不是垂直对齐这是实现这一目标的最简单方法吗？ example

<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

将div显示为inline-block，如下所示：

#christmas_promotion_boxes div {
  display: inline-block;
}

<强> Fiddle

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;

}

水平对齐CSS图像

5 个答案: