如何將引導導航列文字與圖像對齊？

Question

我正在使用引導導覽欄，並且我向導航欄品牌插入了一個圖像，但由於尺寸的原因，它擾亂了對齊。我希望與其一起的文字與它的中間對齊，但我不知道如何讓其他按鈕文字也與它對齊。

這就是輸出的樣子

<a class ="navbar-brand" id="home" href="/">
                    <img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt="">
                      Jefferson Robotics</a>
                <a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
                <a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
                <a class="nav-item nav-link" id="earth" href="/land">Land</a>

我嘗試在導航項目上使用對齊方式，但無論我做什麼，它都不會改變任何東西，這是我第一次使用bootstrap，而且我的html 知識有限，所以我完全不知道該怎麼做:(< /p>

Answer 1

不確定您的實作有什麼問題。我嘗試使用 bootstrap 文件 中提到的導航容器包裝您的程式碼片段看起來不錯：

a.nav-item {
  color: white;
}

a.nav-item:hover {
  color: yellow;
}

sssccc
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


  
     Jefferson Robotics
  Underwater
  Aerial
  Land

也許您只是缺少那個包裝紙？或者您沒有在 HTML 檔案的靜態樣式中包含 bootstrap 的樣式？

Answer 2

您可以嘗試在父元素上的所有<a> 標記以及navbar-brand <a> 標記上使用引導程式中的d-flexalign-items-center 類，如下所示。這將使元素垂直居中。

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

  
     Jefferson Robotics
  Underwater
  Aerial
  Land