如何在bulm navbar-item中将图标和文本居中

Question

我开始使用Bulma和Buefy框架，但一直困扰着这个问题。我正在尝试复制Google Apps菜单，我创建了一个navbar-item div并将下面的代码放入其中：

<div class="columns">
    <div class="column">
        <a>
            <b-icon
                icon="cloud-outline">
            </b-icon>
            <span>function 1</span>
        </a>
    </div>
    <div class="column">
        <b-icon
            icon="compass">
        </b-icon>
        Function 2
    </div>
    <div class="column">
        <b-icon
            icon="scatter-plot">
        </b-icon>
        Function 3
    </div>
</div>

输出为：

我想要实现的结果如下：

我如何居中图标并将文本移动到新行？

Answer 1

您可以使用flex来做到这一点：

.columns {
  display: flex;
  justify-content: space-evenly;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.columns {
  display: flex;
  justify-content: space-evenly;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div class="columns">
  <div class="column">
    <span>icon</span>
    <span>function 1</span>
  </div>
  <div class="column">
    <span>icon</span> Function 2
  </div>
  <div class="column">
    <span>icon</span> Function 3
  </div>
</div>