如何在div中垂直对齐两个或多个(并排)元素?

时间:2012-09-24 17:32:48

标签: css html vertical-alignment

我试图在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;
}

我做错了什么?

3 个答案:

答案 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;
}