如何將引導導航列文字與圖像對齊?
P粉221046425
P粉221046425 2024-03-28 14:13:44
0
2
412

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

這就是輸出的樣子

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

P粉221046425
P粉221046425

全部回覆(2)
P粉797004644

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

a.nav-item {
  color: white;
}

a.nav-item:hover {
  color: yellow;
}
sssccc
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

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

P粉129275658

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

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板