Html 如何将文本与图标字体垂直对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22545325/
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 text with icon font?
提问by Fractaliste
I have a very basic HTML which mix plain text and icon fonts. The problem is that icons are not exactly rendered at the same height than the text:
我有一个非常基本的 HTML，它混合了纯文本和图标字体。问题是图标与文本的高度不完全相同：
<div class="ui menu">
<a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
<a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
<a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>
Any suggestion to fix it?
有什么建议可以修复它吗？
回答by Josh Crozier
You could add vertical-align:middleto the spanelements:
您可以添加vertical-align:middle到span元素：
.nav-text {
vertical-align:middle;
}
回答by sam
There are already a few answers here but I found flexbox to be the cleanest and least "hacky" solution:
这里已经有一些答案，但我发现 flexbox 是最干净、最不“hacky”的解决方案：
parent-element {
display: flex;
align-items: center;
}
To support Safari < 8, Firefox < 21 and Internet Explorer < 10 (Use this polyfillto support IE8+9) you'll need vendor prefixes:
要支持 Safari < 8、Firefox < 21 和 Internet Explorer < 10（使用此 polyfill来支持 IE8+9），您需要供应商前缀：
parent-element {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
回答by getsetbro
vertical-aligncan take a unit value so you can resort to that when needed:
vertical-align可以采用单位值，因此您可以在需要时使用该值：
{
display:inline-block;
vertical-align: 5px;
}
{
display:inline-block;
vertical-align: -5px;
}
回答by Arbel
回答by Marian Udrea
Set line-heightto the vertical size of the picture, then do vertical-align:middlelike Josh said.
设置line-height为图片的垂直尺寸，然后vertical-align:middle像乔希说的那样做。
so if the picture is 20px, you would have
所以如果图片是20px，你会
{
line-height:20px;
font-size:14px;
vertical-align:middle;
}
回答by Alberto Lozano
to center vertically and horizontally use this:
垂直和水平居中使用这个：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
回答by Tomer Almog
Adding to the spans
添加到跨度
vertical-align:baseline;
Didn't work for me but
没有为我工作，但
vertical-align:baseline;
vertical-align:-webkit-baseline-middle;
did work (tested on Chrome)
确实有效（在 Chrome 上测试）
回答by kexplx
Using CSS Grid
使用 CSS 网格
HTML
HTML
<div class="container">
<i class="fab fa-5x fa-file"></i>
<span>text</span>
</div>
CSS
CSS
.container {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
回答by kishan Radadiya
You can use this property : vertical-align:middle;
您可以使用此属性： vertical-align:middle;
.selector-class {
float:left;
vertical-align:middle;
}
