不能在導航欄項目（不是品牌）中垂直居中放置圖像

我遇到了一個我似乎無法找到答案的問題。在bootstrap 4的導航欄中，我試圖在導航欄中添加一個項旁邊的圖像（大多數問題都是關於navbar品牌的，不是這樣）。不能在導航欄項目（不是品牌）中垂直居中放置圖像

隨着加載bootstrap4（和一個自定義的α暗他們），我有以下右對齊下拉：

<ul class="navbar-nav"> 

     <li class="dropdown"> 
      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <img src="https://cdn.discordapp.com/avatars/139412744439988224/a_30a390baf654dfe7f1c336037ea481d4.png?size=32" width="28" height="28" class="d-inline-block align-middle rounded-circle" alt=""> 
      Evie.Codes#4611 
      </a> 
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> 
      <h6 class="dropdown-header"><i class="fa fa-user" aria-hidden="true"></i> Evie.Codes</h6> 
      <a class="dropdown-item" href="/dashboard"><i class="fa fa-cogs" aria-hidden="true"></i> Dashboard</a> 

       <a class="dropdown-item" href="/admin"><i class="fa fa-key"></i> Admin</a> 

      <div class="dropdown-divider"></div> 
      <a class="dropdown-item" href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a> 
      </div> 
     </li> 

    </ul>

隨着圖像，每個菜單項除了「品牌」的部分略微向上移動。如果我刪除圖像，一切都完美居中。

我創建了一個提琴差不多相同的行爲，但由於某些原因，大多數菜單項都居中 - 它們不在我的環境中。 https://jsfiddle.net/ffksbv1v/

實際行爲（紅線爲重點）：

來源

2017-10-17 Évelyne Lachance

您是否嘗試過改變'line-height'和'vertical-align'？ – Krusader

您使用黑暗主題的引導程序。檢查你是否不僅添加了黑暗的CSS文件，而且還添加了主引導文件。 – fen1x

我不能肯定，因爲我不能準確地重現它，但我認爲這可能與事實有關的圖像越大然後是文字。

此外，我認爲這不是移動的菜單，但導航變大，因爲填充和一切都保持不變，但您引入的圖像大於文本，女巫導致元素更新。請注意，如果沒有最後一張圖片，包含填充物的品牌高度恰好是容器格高。但是，在圖像添加後，品牌高度+填充低於容器div（5.5px），也低於div div witch是其餘元素（<div class="collapse navbar-collapse" id="navbar01">...</div> - 5px）的父級。

所以一個解釋可能是品牌a標籤不居中。它似乎沒有完全集中在小提琴中（只有幾個像素的差異~5）。因此，我建議嘗試從最後一個a元素（類型爲nav-link dropdown-toggle 的類別 - 包含圖像和Evie.Codes#4611）中刪除填充，嘗試將margin-top: auto; margin-bottom:auto;添加到品牌元素，或者找到另一種方法將brand居中。

來源

2017-10-17 07:01:34 Berci

不能在導航欄項目（不是品牌）中垂直居中放置圖像

回答

相關問題