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

Question

我有一个带有字体图标的表格，我想将文本左对齐，并将图标居中。我试过使用居中

HTML:

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

CSS:

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

JSFIDLE

我还尝试了设置text-bridge： center！重要；但不起作用。我到底做错了什么？




Answer 1

为包含图标的单元格指定一个类

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

然后

.icon{
    text-align: center;
}

Answer 2

在图标的块容器上使用文本对齐： center；

td {
    text-align: center;
}

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

Answer 3

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

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

再加上你的

td i {
    text-align:center;
}

应该只是中心的图标。