css - 如何将 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;但不起作用。我做错了什么？

score 105 · Accepted Answer

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

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

连同你的

td i {
    text-align:center;
}

应该只将图标居中。

score 28 · Accepted Answer

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

td {
    text-align: center;
}

score 10 · Accepted Answer

给包含图标的单元格一个类

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

接着

.icon{
    text-align: center;
}

score 8 · Accepted Answer

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

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

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

It's a really old topic but as it still comes up top in search results:

Nowadays you can add additional class fa-fw to set it fixed width.

Example:

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

score 3 · Accepted Answer

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

将每个非图标的内容包装td在 a 中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;
}

在这种情况下，我通常不会发布答案，但这似乎太长了，无法发表评论。

score 1 · Accepted Answer

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

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

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

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

9 回答 9