如何为其父母的中心制作fontawesome图标

Question

我使用以下代码：

<div style="width:60px; height:60px; background-color: lightgrey;">
  <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;">
    <i class="fa fa-lg fa-play" aria-hidden="true" style="width: inherit; height: inherit;"></i>
  </a>
</div>

我得到了以下信息：

如何将播放图标设为灰色块中心？

Answer 1

您需要将text-align元素的i属性设置为text-align: center;，然后将其容器设置为line-height: 60px; line = height应与高度匹配外容器。

i {
  text-align: center;  
}
a {
  line-height: 60px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div style="width:60px; height:60px; background-color: lightgrey;">
  <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;">
    <i class="fa fa-lg fa-play" aria-hidden="true" style="width: inherit; height: inherit;"></i>
  </a>
</div>