將自舉導航欄中的圖像垂直對齊到基線

鑑於以下導航欄聲明，我需要將以下圖像對齊到自舉導航欄的底部。我有一個bootply這清楚地表明，他們都排在最前面。將自舉導航欄中的圖像垂直對齊到基線

我曾嘗試將li元素設置爲vertical-align: baseline，但可惜這還不夠。

<div class="navbar navbar-default navbar-fixed-top affix-top"> 
     <div class="container"> 
      <div class="navbar-right"> 
       <a href="">[email protected]</a> 
       <a href="">INFO</a> 
      </div> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav" style="border: 1px solid black"> 
        <li><a href="#"><img src="FIRST IMAGE"></a></li> 
        <li><a href="#"><img src="SECOND IMAGE"></a></li> 
        <li><a href="#"><img src="THIRD IMAGE"></a></li> 
       </ul> 
      </div> 
     </div> 
</div>

來源

2017-03-01 Jim

使用類=「對齊基線」>上線 – mlegg

我試過align-基線，似乎並沒有做到這一點http://www.bootply.com/H5FODh9GjC# – Jim

vertical-align只能在表格單元格的工作（它是兒童）和內聯元素（上他們自己）。

考慮到這一點，你可以改變li到inline-block元素和垂直對齊它們：

.navbar-nav li {float:none; display:inline-block; vertical-align:bottom;}

Updated pen

來源

2017-03-01 16:40:36 Pete

有兩件事情必須改變。行高必須增加您的最高形象的高度，並且圖像必須vertical-align: bottom;

.navbar-nav li a { 
    line-height: 70px; 
} 

.navbar-nav li img { 
    vertical-align: bottom; 
}

http://www.bootply.com/rnfCHaf7R9

來源

2017-03-01 16:40:21 ZimSystem

將自舉導航欄中的圖像垂直對齊到基線

回答

相關問題