Html 如何在圆形div中垂直居中对齐字体真棒图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20832226/
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 center align font awesome icons vertically in a circle div?
提问by rram
I'm trying to center align font awesome icons center by vertically. If there is text we can do it using line-heightproperty even i tried giving the line-heightsame height as height of the div.
我正在尝试将字体真棒图标垂直居中对齐。如果有文本，我们可以使用line-height属性来完成，即使我尝试给出line-height与 div 高度相同的高度。
Tried display:inline-blockand vertical-align:middledidn't do the trick.
尝试过display:inline-block，vertical-align:middle但没有成功。
How to center the icons vertically in all size. It should be dynamic because the icon size may differ. So a hardcode of margin-top may won't work for other size of icon as well div.
如何以所有尺寸垂直居中图标。它应该是动态的，因为图标大小可能不同。因此，margin-top 的硬编码可能不适用于其他大小的图标以及 div。
CODE
代码
.exp{
width:80px;
height:80px;
background-color:red;
border-radius:100%;
line-height:80px;
text-align:center;
vertical-align:middle;
display:inline-block;
}
回答by agconti
You can use line-heightto align the icon in the div.
您可以使用line-height对齐 中的图标div。
Try adding this .fa-camera-retro { line-height: inherit;}to your css. Using inheritmakes line-heighttake on the height of its containing div, so all icons will be centered even if those divs are different sizes. If you want, you can also set the line-heightto the div's height in pixels to explicitly center it, ie line-height: 80px.
尝试将其添加.fa-camera-retro { line-height: inherit;}到您的 css 中。使用inheritmakeline-height占据其包含 div 的高度，因此即使这些 div 的大小不同，所有图标也会居中。如果需要，您还可以将 设置为line-height以像素为单位的 div 高度以明确居中，即line-height: 80px.
Here's the example working in a fiddle.
这是在fiddle.
回答by asherstoppard
Not to detract from the above solution which functions perfectly, but Font Awesome 4 has a great stacking feature that can be used with the following code.
不是要贬低上述功能完美的解决方案，但是 Font Awesome 4 有一个很棒的堆叠功能，可以与以下代码一起使用。
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
There's some really nice options and combinations that can be found here.
可以在这里找到一些非常好的选项和组合。
回答by Yuan Shen
Set a class for font awesome such as .fa-vc then add it to all font awesome font you want it to be aligned with other text. your code will looks like(this sample is a 'x' sign)
为 font awesome 设置一个类，例如 .fa-vc 然后将其添加到所有您希望它与其他文本对齐的 font awesome 字体中。您的代码看起来像（此示例是一个“x”符号）
<i class="fa fa-times fa-vc"></i>
and set this class to
并将这个类设置为
.fa-vc{line-height:inherit!important;}
this will override font awesome's default setting (line-height:1px)
这将覆盖字体 awesome 的默认设置（行高：1px）
problem solved...
问题解决了...
回答by Gothburz
Here's a mixin I like to use for general vertical alignment:
这是我喜欢用于一般垂直对齐的混合：
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@include vertical-align;
Works beautifully if you're using Boostrap as well, use a center-blockclass and it's perfectly centered.
如果您也使用 Boostrap，则效果很好，使用一个center-block类并且它完全居中。
回答by Ian Donahue
This question was asked +4 years ago and technology and browser compatibility has changed quite a lot. Another, more modern approach is use of Flexbox. It's scaleable and you can style a single element instead of styling the parent element and the child element.
这个问题是 4 年前提出的，技术和浏览器兼容性发生了很大变化。另一种更现代的方法是使用 Flexbox。它是可缩放的，您可以设置单个元素的样式，而不是设置父元素和子元素的样式。
What is wonderful about this approach is if you update the width or height, it will automatically with out updating anything else stay vertically and horizontally center.
这种方法的美妙之处在于，如果您更新宽度或高度，它会自动保持垂直和水平居中，而无需更新任何其他内容。
Pros:It works with a single font-icon no problem
优点：它适用于单个字体图标没问题
Cons:If you want to use a font-icon plus text like, "download" you will need to remove the "width" and it will still work as intended
缺点：如果您想使用字体图标加上文本，例如“下载”，您需要删除“宽度”，它仍然可以按预期工作
Example:
例子：
.exp {
display: flex;
align-items: center;
justify-content: space-around;
height: 30px;
width: 30px;
padding: 10px;
color: white;
background-color: green;
border-radius: 50%;
box-sizing: border-box;
}
Working Example:http://jsfiddle.net/iandonahue/M3jxT/1409/
回答by Rohit Kumar
vertical-align: middlewill work if you set the divdisplay: table-cell
http://jsfiddle.net/M3jxT/484/
vertical-align: middle如果您设置divdisplay: table-cell
http://jsfiddle.net/M3jxT/484/
回答by Xuwel Khan
the equal line-height and text-align: center works very well to make icon in the middle both vertically and horizontally. However, if you want to make anything centered both vertically and horizontally in a dynamic way, code like this -
相等的 line-height 和 text-align: center 非常适合在垂直和水平中间制作图标。但是，如果您想以动态方式使任何内容垂直和水平居中，请使用以下代码 -
markup:
标记：
<div class="container>
<div class="target">
</div>
</div>
css:
css：
.container{
position: relative;
}
.target{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
回答by Harish V
I faced a similar problem to vertical aligning a font awesome icon in chrome and Mozilla.
我遇到了与在 chrome 和 Mozilla 中垂直对齐字体真棒图标类似的问题。
I had a div wrapping my font awesome element.
我有一个 div 包裹了我的字体很棒的元素。
My HTML is:
我的 HTML 是：
<div class="icon-wrap">
<span class="fa fa-times"></span>
</div>
giving font size in emsolved the problem.
在em 中给出字体大小解决了这个问题。
回答by Shubhamoy
Using the fa-fw class makes them correctly aligned.
使用 fa-fw 类使它们正确对齐。
<div class="col-sm-1">
<i class="fa fa-mobile fa-fw"></i>
</div>
Check it in action. http://jsfiddle.net/ahj0ncpa/
在行动中检查它。http://jsfiddle.net/ahj0ncpa/
