css - 如何在div元素内居中 Font Awesome 图标

我有一个带有 width: 180px; 和 height: 180px; 的 div 。
如何在容器内水平和垂直居中一个 fontawesome 图标？
注意:我也可以在图标下方添加文字

<div style="width:180px; height:180px; float:left;">
  <i class="fa fa-search fa-4x"></i>
</div>

应该是这样的:

最佳答案

你可以这样做

#search{
    background: gray;
    width:180px;
    height:180px;
    float:left;
    line-height: 180px;
    text-align: center;
    vertical-align: bottom;
}

#search > p {
    margin-top: -155px;
}

工作示例 http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (在示例中使用 icon 而不是 fa，但不应该影响结果。)

关于css - 如何在div元素内居中 Font Awesome 图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25707715/