在其父项中垂直居中标志符号

Question

我有一个图标，我想在其父容器中垂直居中，但是当它出现时，字形落在其容器之外，在这里jsfiddle，用绝对定位破解它是如此麻烦。我也尝试了弹性框布局的各种技巧，但无济于事。

<div class="icon-wrap">
<i class="caret-up icon"></i>
</div>

.CSS

.icon-wrap {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid blue;
}
.icon {
font-style: normal;
display: inline-block;
line-height: 60px;
font-family: Arial;
font-size: 60px;
border: 3px solid green;
}
.icon::before {
content: "1F891";
border: 1px solid red;
}

此外，字形顶部的额外"填充"似乎是它的一部分(不知何故？(，我想要的是一个轻量级的解决方案，它将插入符号放置在其容器的中间。

Answer 1

用div 或其他元素包装图标...

<div class="icon-wrap">
<i class="caret-up icon"></i>
</div>

。然后使用display: flex将弹性框布局应用于该包装器。现在，您可以使用align-items和justify-content规则完美地将包装元素中的图标居中：

.icon-wrap {
display: flex; /* flexbox layout */
align-items: center; /* horizontal centering */
justify-content: center; /* vertical centering */
}