Html 将图像与CSS水平对齐

我想水平对齐我的三幅图像，而不是垂直对齐。实现这一点最简单的方法是什么

#圣诞促销盒{宽度：1000px；边距：0自动0自动；文本对齐：中心；}

将div显示为

内联块

如下所示：

#christmas_promotion_boxes div {
  display: inline-block;
}

添加此

#christmas_promotion_boxes div{
float: left;

---

}

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

将这部分代码添加到css中：

#christmas_promotion_boxes > *{
    float:left;
}

---

当我有内联元素时，我总是将它们放在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;
}

与@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;
}


.圣诞促销盒{
宽度：1000px；
边距：0自动0自动；
显示：内联块；
}


确保
width
大于所有图像的所有宽度之和。
您将所有内容向左浮动，而不仅仅是div。不，这只是选择直接子代（在本例中仅为div）将我的坏，错过了>无忧！我选择了这个方法，所以如果他在包含div的内部放置更多div，它们就不会浮动。
<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;
}