如何垂直对齐 div 中的两个或多个（并排）元素？答案

【问题标题】：How to vertically align two or more (side by side) elements in a div?如何垂直对齐 div 中的两个或多个（并排）元素？
【发布时间】：2012-09-16 04:55:06
【问题描述】：

我正在尝试垂直对齐 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;
}

我做错了什么？

【问题讨论】：

FB 和 Twitter 元素都被父级的 padding-top 向下推了 40px。

标签： css html vertical-alignment

【解决方案1】：

将垂直对齐放在内部 div 上

#footer-twitter{
  display:inline-block;
  vertical-align:middle;
}

#footer-fb{
  display:inline-block;
  vertical-align:middle;
}

【讨论】：

如果第二个<div> 足够长，它将在图像下方结束。我们怎么能阻止它？
请注意，这不是 CSS3，只要您将 div 元素更改为 span 元素，将在旧版浏览器上工作。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

只需在.footer-icons 中添加display: flex; align-items: center; CSS 即可解决您的问题。谢谢

.footer-icons {
    padding-top:40px;
    width:300px;
    margin:auto;
    text-align:center;
    vertical-align:middle;
    display: flex;
    align-items: center;
}

【讨论】：

【解决方案4】：

定义一个line-height 等于或大于更大的图标：

.footer-icons {
    ...
    line-height: 32px;
}

【讨论】：