ブートストラップナビバー内の画像をベースラインに垂直に整列する

Question

以下のナビゲーションバーの宣言では、以下の画像をブートストラップナビバーの下部に合わせる必要があります。私はbootplyを持っています。彼らはすべてが一番上に並んでいることをはっきりと示しています。

私はliの要素をvertical-align: baselineに設定しようとしましたが、それだけでは十分ではありません。

<div class="navbar navbar-default navbar-fixed-top affix-top"> 
     <div class="container"> 
      <div class="navbar-right"> 
       <a href="">info@link.com</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> 

Answer 1

vertical-alignでなければならないだけに（テーブルセル（それは子供のために）またはインライン要素上で動作します自分自身）。念頭に置いて

、あなたはliinline-blockの要素を変更し、垂直にそれらを揃えることができます。

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

Updated pen

Answer 2

2つの事項を変更する必要があります。行の高さは、あなたの最も高い画像の高さに増加しなければならない、と画像がvertical-align: bottom;

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

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

http://www.bootply.com/rnfCHaf7R9