Html 试图在 div 中间放置字体真棒图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23290566/
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
Attempting to position font awesome icon in the middle of a div
提问by Wizzard
I have a basic div with an icon and some text. If I don't try and change the size of the icon it lines up perfect.
我有一个带有图标和一些文本的基本 div。如果我不尝试更改图标的大小，它就会完美排列。
But I want the icon to be bigger but still sit centred in the text. The problem is the icon doesn't sit centred in the div, it seems to move up so the text ends up lined to the bottom of the icon and the icon sits higher in the div. I expect the text to be centred in the icon as the icon would be centred in the div....
但我希望图标更大，但仍位于文本中心。问题是图标不在 div 中居中，它似乎向上移动，因此文本最终排在图标底部，而图标在 div 中位于更高的位置。我希望文本在图标中居中，因为图标将在 div 中居中....
You can see it on this fiddle; http://jsfiddle.net/8mjN7/1/
你可以在这个小提琴上看到它； http://jsfiddle.net/8mjN7/1/
Pulling in
拉入
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
CSS
CSS
div {
border: 1px solid red;
line-height: 40px;
padding: 10px 0px;
font-size: 14px;
}
i {
margin-left: 10px;
font-size: 30px;
}
HTML
HTML
<div>
<i class="fa fa-globe"></i>
Foo bar
</div>
回答by Marc Audet
The simplest solution is to use the vertical-alignproperty as follows:
最简单的解决方案是使用该vertical-align属性如下：
i {
margin-left: 10px;
font-size: 30px;
height: 30px;
vertical-align: middle;
}
see demo at: http://jsfiddle.net/audetwebdesign/9ATq8/
见演示：http: //jsfiddle.net/audetwebdesign/9ATq8/
Note:It is necessary to specify height: 30pxfor the ielement and line-height: 40pxof the parent container, otherwise, any default values may not work as expected.
注意：必须height: 30px为i元素和line-height: 40px父容器指定，否则任何默认值都可能无法正常工作。
CSS table-cell also works but the added complexity is not needed in this case.
CSS table-cell 也可以工作，但在这种情况下不需要增加复杂性。
回答by Simy
I use this to make sure the icon is in the middle. The padding & line-height i think are the two most important.
我用它来确保图标在中间。我认为填充和行高是最重要的两个。
background: rgba(143, 211, 157, 1);
border-radius: 100%;
color: #FFFFFF;
display: inline-block;
font-size: 55px;
height: 45px;
width: 45px;
padding: 40px 45px 40px 35px;
line-height: 45px !important;
transition: .5s;
回答by Javi Mu?oz Tous
Did you try to display the div like a table like this?
您是否尝试像这样的表格一样显示 div？
div {
display:table;
border: 1px solid red;
line-height: 40px;
font-size: 14px;
}
i {
display:table-cell;
text-align:center;
vertical-align:middle;
font-size: 30px;
}
