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

Question

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

1. 我通过NPM下载布尔玛：npm i bulma --save-dev;
2. 我进口的相关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类附加到 span 元素来使它们居中，但这不起作用。任何解决方法？

Answer 1

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

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