Html 如何在div内垂直居中子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10279831/
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
How to center vertically child elements inside div
提问by Sasha
Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div
HTML code:
HTML代码：
<div class="promo_tumbs col_12">
<div class="promo_tumb"></div>
<div class="promo_tumb"></div>
<div class="promo_tumb"></div>
<div class="promo_tumb"></div>
<div class="promo_tumb"></div>
</div>
CSS part:
CSS部分：
.promo_tumbs {
height: 155px;
background: #058;
}
.promo_tumb {
height: 75px;
width: 125px;
background: #990000;
float: left;
margin: 0 10px;
text-align: center;
}
How can I vertically center .promo_tumb?
我怎样才能垂直居中.promo_tumb？
回答by Ashwin Krishnamurthy
Read this article on vertical centering.
阅读这篇关于垂直居中的文章。
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you dont wanna support IE7 or lesser then you can use vertical-align : middle.
如果您不想支持 IE7 或更低版本，则可以使用vertical-align : middle.
Otherwise:
除此以外：
- Set
displaytotablein.promo_tumbs col_12 - Set
vertical-aligntomiddle&displaytotable-cellfor.promo_tumb
- 设置
display于table在.promo_tumbs col_12 - 设置
vertical-align要middle与display以table-cell对.promo_tumb
and it should work.
它应该工作。
回答by dxh
Will the heights (155pxand 75pxrespectively) always be fixed? In that case it'd be as simple as changing the .promo_tumbmargin:
高度（155px和75px）总是固定的吗？在这种情况下，它就像更改.promo_tumb边距一样简单：
margin: 40px 10px
回答by Manuel
use the vertical-align: middle;in the css/style for promo_thumbs.
使用vertical-align: middle;在promo_thumbs的CSS /样式。
回答by Karthi Shan
css part insert in head section..........
<style type="text/css">
.promo_tumbs {height: 155px; background: #058; }
.promo_tumb {height: 75px; width: 125px; background: #990000; float: left;
margin: 40px 50px;
text-align: center; }
</style>
body part coding......
身体部位编码......
<div class="promo_tumbs col_12">
<div class="promo_tumb"></div>
<div class="promo_tumb"></div>
<div class="promo_tumb"></div>
<div class="promo_tumb"></div>
<div class="promo_tumb"></div>
</div>
回答by BLUEPIXY
.promo_tumbs {height: 155px; background: #058;
vertical-align: middle;
display:table-cell;
}
