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

Question

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

1. 我通过 npm 下载了 Bulma：npm i bulma --save-dev;
2. 我根据 Bulma Docs 导入了相关的 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 class 附加到 span 元素来使它们居中，但这没有用。任何解决方法？

Answer 1

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

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