css - 将 Font Awesome 元素垂直居中

Question

我想在一个盒子(div)中垂直居中 Font Awesome 元素。我几乎做到了，但是图标没有精确居中。只有第二个看起来不错。我添加了红色的对称轴来说明差异。问题是什么，我该如何解决？

.icon-wrap a:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.icon-wrap a {
    display: inline-block;
    width: 110px;
    height: 110px;
    text-align: center;
    overflow: hidden;
    margin: 0px auto;
    border: 6px solid black;
    border-radius: 100%;
    text-decoration: none;
}
...

这是我在 fiddle 中运行的代码

Answer 1

实际上，plus-square-o图标似乎是在 Font Awesome 中以这种方式构建的。这就是为什么另外 2 个非常一致而第一个不是。

如果您将鼠标悬停在 Font Awesome 中的这个图标上，您会发现它与 plus-square 的对齐方式不同。 .

因此，在这种情况下，您可以更改图标(以完美对齐每个图标)，也可以仅在第一个 <div class="icon-wrap"> 上进行操作.

像这样的东西:

.icon-wrap:first-child .icon-holder {
    padding-top: 5px;
}

这是更新的 jsfiddle对此。