如何水平居中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;
}

我也试着设置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>) -文本对齐并不适用于内联元素,只有块容器:

td {
    text-align: center;
}

Answer 3

为包含图标的单元格提供课程

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

然后

.icon{
    text-align: center;
}

Answer 4

我用这个解决了我的问题：

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

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

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

Answer 5

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

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

Answer 6

这是一个非常古老的话题，但它仍然在搜索结果中名列前茅：

现在，您可以添加额外的类fa-fw来将其设置为固定宽度。

例子：

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