Question

我已经尝试了所有方法，但我无法看到导致问题的原因。我希望我的图标能够在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>

Answer 1

这应该可以解决问题：

.input-group-text {
    width: 45px;
}

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

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

Answer 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>

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

2 个答案: