將 fontawesome 圖標與導航欄中的文本垂直對齊

Question

我正在嘗試將 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中，並將兩者設置為相同的字體大小，但我無法使其工作。

Answer 1

試試下面的代碼，它對我有用：

<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，您可以根據需要進行更改。

Answer 2

你應該使

標記高度為 100% 的 flex 容器（顯然在設置 position: relative 之后。然后你可以輕松地做 justify-content: center; 和 align-items: center;

Answer 3

對於像我這樣的任何其他 HTML 和 CSS 菜鳥，似乎p元素默認有邊距。 我見過這個問題，它說 CSS 2.1 規范有一個基本元素的默認樣式表。 移除p元素的下邊距使其與圖標對齊。

關於水平空間， DIVYIA BAID設置左邊距的建議正是我想要的。

Answer 4

這很簡單

嘗試此代碼以獲得 Fontawesome 或任何其他圖標的最佳 alignment

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

Answer 5

將內容包裝在 flex 容器中，然后將項目居中對齊以水平對齊它們。