html - 如何在圆形 div 中垂直居中对齐 Font Awesome 图标？

Question

我正在尝试将字体图标垂直居中对齐。如果有文本，我们可以使用 line-height 属性来实现，即使我尝试给 line-height 设置与 div 高度相同的高度。

尝试过 display:inline-block 和 vertical-align:middle 没有成功。

如何使所有尺寸的图标垂直居中。它应该是动态的，因为图标大小可能不同。因此 margin-top 的硬编码可能不适用于其他大小的图标以及 div。

代码

.exp{
    width:80px;
    height:80px;
    background-color:red;
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
}

JSFIDDLE

Answer 1

您可以使用 line-height 来对齐 div 中的图标。

尝试将此 .fa-camera-retro { line-height: inherit;} 添加到您的 css。使用 inherit 使 line-height 占据其包含的 div 的高度，因此即使这些 div 大小不同，所有图标也将居中。如果需要，您还可以将 line-height 设置为 div 的高度(以像素为单位)以明确居中，即 line-height: 80px.

这是在 fiddle 中工作的示例.