Html 水平对齐图像 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19683184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align images horizontally CSS
提问by Karina McGourty
I want to align my three images horizontally instead of vertically what is the easiest way to achieve this? 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;}
回答by Patsy Issa
回答by Joel Worsham
You need the div's containing the images to be floated.
您需要包含要浮动的图像的 div。
Add this section of code into your css:
将这部分代码添加到您的 css 中：
#christmas_promotion_boxes > *{
float:left;
}
回答by zazvorniki
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 中并显示 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;
}
回答by Gianfranco P.
Slightly different from @zazvorniki accepted answer:
与@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/
http://jsfiddle.net/tDfCR/114/
Make sure the widthis larger the sum all of width of all the images.
确保width所有图像的宽度总和更大。
回答by Munkhtsol Batchuluun
add this
添加这个
#christmas_promotion_boxes div{
float: left;
}
}
