CSS 如何水平居中 Font Awesome 图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19162889/
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 Font Awesome icons horizontally?
提问by Mustapha Aoussar
I have a table with a Font Awesomeicon and I want to align text left and center icons.
I tried with centering <i>but doesn't work:
我有一个带有Font Awesome图标的表格，我想将文本左对齐和居中图标对齐。我尝试居中<i>但不起作用：
HTML:
HTML：
<td><i class="icon-ok"></i></td>
CSS:
CSS：
td, th {
text-align: left;
}
td i {
text-align:center;
}
I also tried to set text-align:center !important;but doesn't work. What did I do wrong?
我也尝试设置，text-align:center !important;但不起作用。我做错了什么？
回答by andyb
Add your own flavour of the font awesome style
添加您自己的字体真棒风格风格
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
which along with your
连同你的
td i {
text-align:center;
}
should center just the icons.
应该只将图标居中。
回答by adrift
Use text-align: center;on the block container of the icon (the <td>) - text-align doesn't apply to inline elements, only block containers:
用于text-align: center;图标的块容器 (the <td>) - text-align 不适用于内联元素，仅适用于块容器：
td {
text-align: center;
}
回答by nilobarp
Give a class to your cell containing the icon
为包含图标的单元格设置一个类
<td class="icon"><i class="icon-ok"></i></td>
and then
进而
.icon{
text-align: center;
}
回答by Everton Buzzi
i solved my problem with this:
我用这个解决了我的问题：
<div class="d-flex justify-content-center"></div>
im using bootstrap with font awesome icons.
我使用带有字体真棒图标的引导程序。
if you want to know more acess the link below: https://getbootstrap.com/docs/4.0/utilities/flex/
如果您想了解更多信息，请访问以下链接：https: //getbootstrap.com/docs/4.0/utilities/flex/
回答by Everton Buzzi
OP you can use attribute selectors to get the result you desire. Here is the extra code you add
OP 您可以使用属性选择器来获得您想要的结果。这是您添加的额外代码
tr td i[class*="icon"] {
display: block;
height: 100%;
width: 100%;
margin: auto;
}
Here is the updated jsFiddle http://jsfiddle.net/kB6Ju/5/
这是更新的 jsFiddle http://jsfiddle.net/kB6Ju/5/
回答by Coded Container
If your icons are in an icon stack you can use the following code:
如果您的图标位于图标堆栈中，您可以使用以下代码：
.icon-stack{ margin: auto; display: block; }
回答by thirtydot
Since you don't want to add a class to cells containing an icon, how about this...
既然您不想向包含图标的单元格添加类，那么这个怎么样...
Wrap the contents of each non-icon tdin a span:
将每个非图标的内容包装td在一个span:
<td><span>consectetur</span></td>
<td><span>adipiscing</span></td>
<td><span>elit</span></td>
And use this CSS:
并使用此 CSS：
td {
text-align: center;
}
td span {
text-align: left;
display: block;
}
I wouldn't normally post an answer in this situation, but this seems too long for a comment.
在这种情况下，我通常不会发布答案，但这对于评论来说似乎太长了。
