Bulma css导航栏项中的换行符

在一个Bulma css导航栏项目中，我希望有一个居中的图标，在这个图标下面有一些文本

<nav class="navbar " role="navigation" aria-label="main navigation">
  <div class="navbar-menu navbar-end" id="navMenu">
    <a class="navbar-item">
      <p><i class="far fa-comment"></i></p>
      <p>Contact</p>
    </a>
  </div>
</nav>

接触

---

Bulma将链接中的两个段落放在同一行，这不是p标记的默认行为。navbar项的display:-webkit框和display:flex属性似乎创建了这种行为，但我不确定应该用什么覆盖它们？

这是因为flexbox。在.navbar项上添加样式，如下所示：

<a class="navbar-item navbar-item-center-icon">
  <p><i class="far fa-comment"></i></p>
  <p>Contact</p>
</a>

.navbar-item-center-icon {
 flex-direction: column;
}

接触

.navbar项目中心图标{
弯曲方向：立柱；
}