Bulma和Fontawesome：如何垂直和水平对齐图标？

Question

我最近开始尝试使用Bulma和Fontawesome，发现垂直和水平对齐图标有些棘手。我的情况如下。

1. 我通过npm下载了Bulma：npm i bulma --save-dev;
2. 按照Bulma文档导入相关的Fontawesome文件：<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>;
3. 创建了一个基本的输入元素字段，左侧有一个图标，右侧有另一个图标:

<div class="control has-icons-left has-icons-right">
    <input class="input" type="text">
    <span class="icon is-small is-left">
        <i class="fas fa-map-pin"></i>
    </span>
    <span class="icon is-small is-right">
        <i class="fas fa-check"></i>
    </span>
</div>

那导致图标在各自位置的左上角对齐。我尝试给元素添加has-text-centered类以实现居中，但没有起作用。有什么解决方法吗？

- Bruno Mazza

---

可能是 Bulma中垂直居中元素的重复问题。 - Mark

你的回答几乎是重复问题中答案的完全副本。 - Mark

@Mark 那里被接受的答案没有提到 align-items: center，而这正是对我有效的。 - Bruno Mazza

@Mark，好的，我看到了。现在该怎么办？我考虑了一种特定的解决方案，适用于Font Awesome，但它并没有得到特别的解决（我喜欢这个副词）。既然你显然比我更有经验（3k+声望 vs. 61），那我应该删除我的问题吗？干杯。 - Bruno Mazza

如果其他人同意它是重复的，它将被标记为重复，然后也会被处理 :) - Mark

Answer 1

我通过在CSS文件中定位span元素并将其设置为flex容器，找到并应用了一个有效的解决方案：

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

- Bruno Mazza

Answer 2

作为替代方案，我在当前的Bulma文档中找到了以下内容：

您可以使用图标文本包装器将图标与文本组合在一起，只要内部的所有文本都包含在自己的span元素中：

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</span>

- Elte Hupkes