如何水平居中字体真棒图标

Question

>我有一个带有字体真棒图标的表格，我想将文本左对齐和居中图标。我尝试将<i>居中，但不起作用：

.HTML：

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

.CSS：

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

js小提琴

我也尝试设置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;
}

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

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;
}

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

Answer 6

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

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

例：

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

Answer 7

既然您不想向包含图标的单元格添加类，那么这个怎么样...

将每个非图标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 8

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

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

Answer 9

您可以使用

属性margin来解决此问题。在我的情况下，将边距设置为 3 像素解决了这个问题。这是一个例子：

<i class="fas fa-file-upload" style="margin: 3px;">

显然，在您的情况下，3 像素不一定足够，所以我建议您做一些测试。

注意：我在 flex 元素中使用它，所以我不确定在表中它是否相同。