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

【问题标题】：Bulma and Fontawesome: How to align icons vertically and horizontally?Bulma 和 Fontawesome：如何垂直和水平对齐图标？
【发布时间】：2019-06-05 05:53:00
【问题描述】：

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

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

<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 类附加到 span 元素来使它们居中，但这不起作用。有什么解决方法吗？

【问题讨论】：

Center elements vertically in Bulma的可能重复
您自己的答案与副本中的答案几乎完全相同
@Mark 我看到了，但这是 Font Awesome 图标的特定问题，我考虑分享我的解决方案。
@Mark 那里接受的答案没有提到align-items: center，这正是对我有用的。
接受的答案下的第一条评论提到align-items: center

标签： css alignment font-awesome bulma

【解决方案1】：

我找到并应用了一个可行的解决方案，只需将我的 CSS 文件中的 span 元素作为目标并将其设为 flex-container：

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

【讨论】：