将 FontAwesome 图标水平居中答案

【问题标题】：Centering FontAwesome Icons Horizontally将 FontAwesome 图标水平居中
【发布时间】：2021-02-26 11:23:56
【问题描述】：

我目前正在使用 FontAwesome，并且很难在其容器中水平居中三个图标。我尝试过通过定位来实现，还尝试了不同的显示属性，甚至尝试将容器更改为网格框，但我似乎仍然无法获得所需的结果。

.icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<div>
  <h3>Follow</h3>
  <div class="icons">
    <i class="fab fa-facebook"></i>
    <i class="fab fa-twitter"></i>
    <i class="fab fa-instagram"></i>
  </div>
</div>

【问题讨论】：

.icon { text-align: center; } 就是您所需要的。 i 是一个内联元素，因此可以与 text-align 对齐。
我已经试过了，但还是不行
什么不完全有效，它看起来如何？如果没有 fontawesome 库，这里很难重现

标签： html css icons font-awesome centering

【解决方案1】：

如果

.icons {
 text-align: center;
 }

不工作，尝试使 div 居中：

.icons {
 width: 100px;
 margin: auto;
 }

当然你可以给你想要的宽度。

【讨论】：