如何水平居中Font Awesome图标？

Question

我有一张带有Font Awesome图标的表格，我希望将文字左侧和中间图标对齐。 我试过以<i>为中心但不起作用：

HTML：

<td><i class="icon-ok"></i></td>

CSS：

td, th {
    text-align: left;
}
td i {
    text-align:center;
}

jsFiddle

我也尝试设置text-align:center !important;但不起作用。我做错了什么？

Answer 1

添加你自己的字体真棒风格

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 100%;
}

与你的

一起

td i {
    text-align:center;
}

应该只以图标为中心。

Answer 2

在图标的块容器上使用text-align: center;（<td>） - text-align不适用于内联元素，仅阻止容器：

td {
    text-align: center;
}

http://jsfiddle.net/kB6Ju/2/

Answer 3

为包含图标

的单元格提供课程

<td class="icon"><i class="icon-ok"></i></td>

然后

.icon{
    text-align: center;
}

Answer 4

由于您不想将类添加到包含图标的单元格，因此...

在td：

中包含每个非图标span的内容

<td><span>consectetur</span></td>
<td><span>adipiscing</span></td>
<td><span>elit</span></td>

并使用此CSS：

td {
    text-align: center;
}
td span {
    text-align: left;
    display: block;
}

我通常不会在这种情况下发布答案，但这对于评论来说似乎太长了。

Answer 5

OP您可以使用属性选择器来获得所需的结果。这是您添加的额外代码

tr td i[class*="icon"] {
    display: block;
    height: 100%;
    width: 100%;
    margin: auto;
}

以下是更新的jsFiddle http://jsfiddle.net/kB6Ju/5/

Answer 6

如果您的图标位于图标堆栈中，则可以使用以下代码：

.icon-stack{ margin: auto; display: block; } 

Answer 7

我通过以下方法解决了我的问题：

<div class="d-flex justify-content-center"></div>

使用带有字体真棒图标的引导程序。

如果您想了解更多信息，请点击以下链接： https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 8

这是一个非常古老的话题，但仍然在搜索结果中排在首位：

如今，您可以添加其他类别fa-fw来将其设置为固定宽度。

示例：

<i class="fa fa-pencil fa-fw" aria-hidden="true"></i>