Question

我想在框（div）中垂直居中字体真棒元素。我几乎是这样做的，但是图标不是精确居中的。只有第二个看起来没问题。我添加了红色对称轴来说明差异。问题是什么？我该如何解决？

.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中以这种方式构建的。这就是为什么其他两个人很好地对齐而第一个不是。

如果您将鼠标悬停在Font Awesome中的此图标上，则可以看到它与plus-square的对齐方式不同。

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

像这样的东西：

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

此处更新了jsfiddle。

垂直居中Font Awesome元素

1 个答案: