时间戳

首页 > 解决方案 > Bulma 和 Fontawesome：如何垂直和水平对齐图标？

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

问题描述

我最近开始尝试使用 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类附加到 span 元素来使它们居中，但这没有用。任何解决方法？

标签： cssalignmentfont-awesomebulma

解决方案

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

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

推荐阅读