我正在尝试将字体图标垂直居中对齐。如果有文本,我们可以使用 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;
}
最佳答案
您可以使用 line-height
来对齐 div
中的图标。
尝试将此 .fa-camera-retro { line-height: inherit;}
添加到您的 css。使用 inherit
使 line-height
占据其包含的 div 的高度,因此即使这些 div 大小不同,所有图标也将居中。如果需要,您还可以将 line-height
设置为 div 的高度(以像素为单位)以明确居中,即 line-height: 80px
.
这是在 fiddle 中工作的示例.
关于html - 如何在圆形 div 中垂直居中对齐 Font Awesome 图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20832226/