69

我有一个带有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;但不起作用。我做错了什么？

4

9 回答 9

105

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

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

连同你的

td i {
    text-align:center;
}

应该只将图标居中。

于 2013-10-03T15:34:46.570 回答
28

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

td {
    text-align: center;
}

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

于 2013-10-03T15:19:06.973 回答
10

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

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

接着

.icon{
    text-align: center;
}
于 2013-10-03T15:21:00.297 回答
8

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

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

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

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

于 2019-04-03T16:35:51.403 回答
5

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

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

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

于 2013-10-03T15:34:19.620 回答
4

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

.icon-stack{ margin: auto; display: block; }
于 2015-06-02T19:13:35.697 回答
4

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>
于 2020-06-18T22:02:49.577 回答
3

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

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

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

于 2013-10-03T15:32:53.830 回答
1

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

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

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

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

于 2021-09-02T13:10:51.100 回答