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

Question

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

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

  <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 中，并设置相同的字体大小，但我无法使其工作.

Answer 1

你应该让

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

Answer 2

将内容包裹在弹性容器中，然后将项目居中对齐以水平对齐它们。

Answer 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>

另外，这里我把文字和图标之间的space设为12px，大家可以根据自己的需要更改。

Answer 4

对于像我这样的任何其他 HTML 和 CSS 菜鸟，似乎 p 元素默认有边距。我已经看到 this question where it says that CSS 2.1 specification has a default style sheet 的基本元素。删除 p 元素的底部边距使其与图标对齐。

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

Answer 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>

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

Vertically align fontawesome icon with text in navbar

html

css

twitter-bootstrap

font-awesome