水平对齐图像 CSS答案

【问题标题】：Align images horizontally CSS水平对齐图像 CSS
【发布时间】：2017-03-04 04:09:08
【问题描述】：

我想水平对齐我的三个图像而不是垂直对齐，实现此目的的最简单方法是什么？ 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;}

【问题讨论】：

标签： html css

【解决方案1】：

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

#christmas_promotion_boxes div {
  display: inline-block;
}

Fiddle

【讨论】：

【解决方案2】：

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

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

#christmas_promotion_boxes > *{
    float:left;
}

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

【讨论】：

您将所有内容都向左浮动，而不仅仅是 div。
不，这只是选择直接后代（在这种情况下只是 div）
糟糕，错过了 >
别担心！我选择了这种方法，所以如果他在包含的 div 中放置更多的 div，它们就不会浮动。

【解决方案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;
}

【讨论】：

【解决方案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 大于所有图像的宽度总和。

【讨论】：

【解决方案5】：

添加这个

#christmas_promotion_boxes div{
float: left;

}

【讨论】：