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

我有一个带有字体真棒图标的桌子，我想alignment左侧和中间的图标。我试图与居中<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; 但不起作用。我做错了什么？

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

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

随你的

 td i { text-align:center; }

应该只居中图标。

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

 td { text-align: center; }

给包含图标的单元格授课

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

接着

 .icon{ text-align: center; }

既然你不想添加一个类到包含图标的单元格，那么这个…

在一个span包装每个非图标td的内容：

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

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

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

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

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

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