我试图在一个 div 中垂直对齐两个具有不同高度的元素:
<div class="footer-icons">
<div id="footer-twitter">
<img src="images/twitter.png" width="40" alt="">
</div>
<div id="footer-fb">
<div class="fb-like" data-href="http://facebook.com/user" data-send="false" data-layout="button_count" data-width="160" data-show-faces="false" data-font="arial"></div>
</div>
</div>
twitter div 的高度为 40px,fb div 的高度为 20px。目前正在发生的事情是 fb div 与 twitter 图片的底部边缘垂直居中。这是 CSS:
.footer-icons {
padding-top:40px;
width:300px;
margin:auto;
text-align:center;
vertical-align:middle;
}
#footer-twitter {
display:inline-block;
}
#footer-fb {
display:inline-block;
}
我做错了什么?
最佳答案
将垂直对齐放在内部 div 上
#footer-twitter{
display:inline-block;
vertical-align:middle;
}
#footer-fb{
display:inline-block;
vertical-align:middle;
}
关于css - 如何垂直对齐 div 中的两个或多个(并排)元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12569980/