将 fontawesome 图标与导航栏中的文本垂直对齐答案

【问题标题】：Vertically align fontawesome icon with text in navbar将 fontawesome 图标与导航栏中的文本垂直对齐
【发布时间】：2020-11-08 05:51:48
【问题描述】：

我正在尝试将 fontawesome 图标与引导程序导航栏中的一些文本垂直对齐。导航栏的垂直大小设置为10vh。我无法使文本与图标对齐，如下图所示：

我还想在图标和文本之间添加一些水平空间。这是我的代码：

  <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
    <ul class="navbar-nav nav-fill w-100">
      <li class="nav-item active">
        <a class="nav-link d-flex align-items-center justify-content-center" href="#">
          <i class="fa fa-home fa-2x icon-white"></i>
          <p>Home</p><!--<span class="sr-only">(current)</span>-->
        </a>
      </li>
      ... (some more li)
    </ul>
  </nav>

我还尝试将图标放在段落中，将 a 元素放在 div 中，并将两者设置为相同的字体大小，但我无法使其工作。

【问题讨论】：

尝试使用边距属性...

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

你应该做的

标记一个高度为 100% 的 flex 容器（显然在设置 position: relative 之后。然后你可以轻松地做 justify-content: center; 和 align-items: center;

【讨论】：

【解决方案2】：

将内容包装在 flex 容器中，然后将项目居中对齐以水平对齐。

【讨论】：

【解决方案3】：

试试下面的代码，它对我有用：

<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
    <ul class="navbar-nav nav-fill w-100">
      <li class="nav-item active">
        <a class="nav-link" style="display: flex; align-items: center;" href="#">
          <i class="fa fa-home fa-2x icon-white"></i>
          <p style="margin-left: 12px;">Home</p>
        </a>
      </li>
      ... (some more li)
    </ul>
  </nav>

另外，这里我将文本和图标之间的间距设置为 12px，您可以根据需要进行更改。

【讨论】：

【解决方案4】：

对于像我这样的任何其他 HTML 和 CSS 菜鸟，p 元素似乎默认有边距。我见过this question，它说CSS 2.1 规范有一个default style sheet 用于基本元素。移除 p 元素的下边距使其与图标对齐。

关于水平空间，DIVYIA BAID 设置左边距的建议正是我想要的。

【讨论】：

【解决方案5】：

很简单

尝试此代码以获得最佳对齐 Fontawesome 或任何其他图标

<li styles="display:flex">
   <a href="#" role="button" data-haspopup="true" aria-expanded="false">Home</a>
   <i class="fal fa-home" style="vertical-align: middle;margin: auto;"></i>
</li>

【讨论】：