How to center vertically child elements inside div
Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div
HTML code:
<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:
.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
?
Read this article on vertical centering.
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
.
Otherwise:
display
to table
in .promo_tumbs col_12
vertical-align
to middle
& display
to table-cell
for .promo_tumb
and it should work.
Will the heights ( 155px
and 75px
respectively) always be fixed? In that case it'd be as simple as changing the .promo_tumb
margin:
margin: 40px 10px
use the vertical-align: middle;
in the css/style for promo_thumbs.
上一篇: 图像的水平对齐
下一篇: 如何在div内垂直居中子元素