Css 如何将bulma导航栏项目中的图标和文本居中

我开始使用Bulma和Buefy框架，我一直在处理这个问题。
我正在尝试复制google apps menù，我创建了一个navbar项目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>

我希望达到的结果如下：

如何将图标居中并将文本移动到新行？
您可以使用css flex实现这一点。通过使用附加键：


（说明弹性应适用的方向）
（对齐容器内的项目）
（容器内项目的间距）


.columns{
显示器：flex；
对正内容：空间均匀；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}

偶像
职能1
图标功能2
图标功能3
您可以使用css flex实现这一点。通过使用附加键：


（说明弹性应适用的方向）
（对齐容器内的项目）
（容器内项目的间距）


.columns{
显示器：flex；
对正内容：空间均匀；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}

偶像
职能1
图标功能2
图标功能3
您可以使用以下选项设置链接的样式：


。自定义导航a{
显示器：flex；
柔性流动：柱状nowrap；
对齐项目：居中；
填充：1em；
背景色：rgba（0,0,0,0.1）；
}
.定制导航一{
字体大小：3rem；
}

您可以使用以下选项设置链接的样式：


。自定义导航a{
显示器：flex；
柔性流动：柱状nowrap；
对齐项目：居中；
填充：1em；
背景色：rgba（0,0,0,0.1）；
}
.定制导航一{
字体大小：3rem；
}


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

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