Html 如何在Bootstrap 4导航栏导航项中创建小文本对齐的中心和下方图标，而不影响导航栏高度？

使用Bootstrap 4，我有一个带有以下导航项的导航栏：

<form class="form-inline">
        <a> <i class="fa fa-gear"></i> Option A</a>
      </form>

方案A

我想在图标的中心和下方添加小文本对齐。最好的方法是什么？（选项A文本应足够大以便于阅读，但不应太大以便于修改navbar引导类以适应）

注释：我想确保文本和图标都在导航栏的中间垂直对齐，而不增加导航栏的高度，在“A”上的PT-3或MT-3会影响。

---

添加

似乎也使导航栏“更高”。。。这是我想要避免的。

未测试，但在

标记中添加了选项a

 <form class="form-inline">
            <a> <i class="fa fa-gear"></i> <p>Option A</p></a>
        </form>


方案A

未测试，但将选项a放入
标记中

 <form class="form-inline">
            <a> <i class="fa fa-gear"></i> <p>Option A</p></a>
        </form>


方案A

第一步是将其包装在
元素中，并将
d-block
类添加到图标中。然后，所有的东西都被包装在<代码> <代码>中，类“代码> NavBar NaveText Center Pt-1 PB-0以两个中心对齐并垂直对齐它们在NavBar的中间。锚定标签上的classes
nav item nav link p-0
将其转换为导航链接并移除填充：









第一步是将其包装在
元素中，并将
d-block
类添加到图标中。然后，所有的东西都被包装在<代码> <代码>中，类“代码> NavBar NaveText Center Pt-1 PB-0以两个中心对齐并垂直对齐它们在NavBar的中间。锚定标签上的classes
nav item nav link p-0
将其转换为导航链接并移除填充：









这非常接近，但图标未定位在文字的中心，而且文本和图标在导航栏上似乎没有垂直居中对齐。尝试放置“pt-3”或“mt-3”类有助于对齐，但以牺牲导航栏的大小为代价。我想在导航栏上向下移动图标和居中对齐的文本，但不扩大导航栏的高度。Dude make fiddle@RolandoThis非常接近，但图标未定位在文字的中心，并且显示文本和图标在导航栏上垂直未居中对齐。尝试放置“pt-3”或“mt-3”类有助于对齐，但以牺牲导航栏的大小为代价。我想在导航栏上向下移动图标和居中对齐的文本，但不要扩大导航栏的高度