Question

我创建了一个表格，其中一些<td>填充了一些文字，之后我使用Font Awesome icons添加了一个图标。文本在中间垂直对齐，但图标不是，我似乎无法弄清楚如何对齐它。我怀疑这是因为i class添加了“右拉”类，但绝对不确定。

jsfiddle：http://jsfiddle.net/LjETb/1/

Answer 1

对于任何仍在看这个问题的人来说，问题是.pull-right类，它会向元素添加一个浮动：右边的元素并拧紧行高。

要修复，请更改目标元素的行高以匹配其父元素。要在全球范围内做到这一点：

.fa.pull-right,
.fa.fa-pull-right,
[class*=" fa-"].pull-right,
[class*=" fa-"].fa-pull-right {
  line-height: inherit;
}

Answer 2

这是常见修复。我用图标字体经历了很多这个问题。就像你（看起来）一样，我很挑剔。图标字体往往偏离顶部约-2px。我通常只在我的大多数图标集的顶部添加几个像素。除非其他人有更好的解决方案（Bootstrap没有...仅因为它可能因使用而异）...但这对于拥有敏锐眼睛的人来说是一个常见问题。 ;）

执行此操作将其应用于您的所有图标：

[class*=" fa-"]{
    margin-top: 2px;
}

http://jsfiddle.net/LjETb/4/

垂直对齐拉右不起作用

2 个答案: