无法让 FontAwesome 图标在 span 父级中居中

Posted 2023-03-06

【中文标题】无法让 FontAwesome 图标在 span 父级中居中

【英文标题】：Can't get FontAwesome icons to center within span parent

【发布时间】：2018-08-04 02:14:16

【问题描述】：

我已经尝试了所有方法，但我看不出是什么导致了问题。我希望我的图标在 span 类中居中（所以我的所有图标看起来都居中而不是随机/杂乱）。

这是我的小提琴：

https://jsfiddle.net/fbuww2hr/1/

导致问题的 html 的主要部分：

<div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">
                <i class="fas fa-user"></i>
            </span>
      </div>
      <input type="text" class="form-control" placeholder="Fornavn" aria-label="Fornavn">
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text border-right-0" style="text-align: center; background-color: white !important">
                <i class="fas fa-mobile"></i>
            </span>
      </div>
      <input type="text" class="form-control border-left-0" placeholder="Efternavn" aria-label="Efternavn">
    </div>

【参考方案1】：

这应该可以解决问题：

.input-group-text 
    width: 45px;

然后将mx-auto 添加到您的字体真棒元素中，如下所示：

<span class="input-group-text">
    <i class="far fa-envelope mx-auto"></i>
</span>

【讨论】：

谢谢！为什么 mx-auto 有效但 text-align: center 无效？我已经阅读了十几篇关于我的问题的 *** 帖子，但没有一个建议使用 mx-auto

@Fross 因为 mx-auto 将左右边距设置为 auto，使元素居中，而不是文本居中。

【参考方案2】：

将justify-content: center; 添加到此元素。

<span class="input-group-text border-right-0" style="text-align: center; background-color: white !important"> 
    <i class="fas fa-mobile"></i> 
</span>