Html 如何垂直对齐 div 中的两个或多个（并排）元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12569980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align two or more (side by side) elements in a div?
提问by tariq
I am trying to vertically align two elements with different heights in a div:
我正在尝试垂直对齐 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>
The twitter div has a height of 40px, and the fb div has a height of 20px. What is currently happening is the fb div is vertically centered with the bottom edge of the twitter image. Here's the CSS:
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;
}
What am I doing wrong?
我究竟做错了什么？
回答by Forty-Two
Put the vertical align on the inner divs
将垂直对齐放在内部 div 上
#footer-twitter{
display:inline-block;
vertical-align:middle;
}
#footer-fb{
display:inline-block;
vertical-align:middle;
}
回答by Cumulo Nimbus
Simple answer:
简单的回答：
Long answer:
长答案：
display: flexis a pretty cool tool to have in your toolbelt. Hereis some helpful documentation to get you started with it.
display: flex是一个非常酷的工具，可以放在您的工具带中。这里有一些有用的文档可以帮助您开始使用它。
Specifically in your case these properties would be useful:
特别是在您的情况下，这些属性将很有用：
align-items:center- this will vertically align the centers of all child elements
align-items:center- 这将垂直对齐所有子元素的中心
justify-content:center- this will horizontally center child elements within the parent container (not sure you want this or not, but may be helpful as well)
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>回答by Hassan Siddiqui
Just add display: flex; align-items: center;in .footer-iconsCSSwill resolve your issue. Thanks
只需添加display: flex; align-items: center;在.footer-iconsCSS能够解决您的问题。谢谢
.footer-icons {
padding-top:40px;
width:300px;
margin:auto;
text-align:center;
vertical-align:middle;
display: flex;
align-items: center;
}
回答by Ricardo Souza
Define a line-heightequal or greater than the bigger icon:
定义一个line-height等于或大于更大的图标：
.footer-icons {
...
line-height: 32px;
}
