我试图在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;
}
我做错了什么?
答案 0 :(得分:20)
将垂直对齐放在内部div上
#footer-twitter{
display:inline-block;
vertical-align:middle;
}
#footer-fb{
display:inline-block;
vertical-align:middle;
}
答案 1 :(得分:0)
简单答案:
好答案:
display: flex
是一款非常不错的工具。 Here是一些有用的文档,可帮助您入门。
具体来说,这些属性将非常有用:
align-items:center
-这将垂直对齐所有子元素的中心
justify-content:center
-这将使子元素在父容器内水平居中(不确定是否要这样做,但也可能会有帮助)
.footer-icons {
border: 1px solid #000;
padding-top:40px;
width:300px;
margin: auto;
display:flex;
align-items:center;
justify-content:center;
}
<div class="footer-icons">
<div id="footer-twitter">
Center me
</div>
<div id="footer-fb">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Facebook_logo_%28square%29.png" width="40" alt="">
</div>
</div>
答案 2 :(得分:0)
只需在display: flex; align-items: center;
中添加.footer-icons
CSS 就可以解决您的问题。谢谢
.footer-icons {
padding-top:40px;
width:300px;
margin:auto;
text-align:center;
vertical-align:middle;
display: flex;
align-items: center;
}