如何排列自舉導航欄中圖像和文字的底部？

我有一個合理的基本bootstrap導航欄，如下面的代碼所示。如何排列自舉導航欄中圖像和文字的底部？

我在乎的作品是徽標unified_brand.png和Contact鏈接。我想以某種方式排列品牌形象和聯繫人文字鏈接的底部。

是否有可能以編程方式執行它？我一直在使用填充和邊距來消除像素，並且它做到了這一招，但感覺應該有更好的答案？

.navbar-brand { 
 
    display: inline-block; 
 
    float: none; 
 
    font-size: 18px; 
 
    height: 100%; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
} 
 

 
#navBarMain { 
 
    border-top: 5px solid #ff5c39; 
 
    border-bottom: 2px solid black; 
 
    padding-bottom: 10px; 
 
    background-color: white; 
 
    padding-top: 8px; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default" id="navBarMain"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="#" class="navbar-brand"> 
 
      <img style="" src="~/images/unified_brand.png" alt="Company Logo"> 
 
     </a> 
 
    </div> 
 

 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
     </ul> 
 

 

 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
</nav>

來源

2017-08-02 AngryHacker

小把戲，就像魅力，你要與對齊元素之前放置一個inline-block的。爲此，父標籤必須具有定義高度。

#navBarMain { 
    border-top: 5px solid #ff5c39; 
    border-bottom: 2px solid black; 
    padding-bottom: 10px; 
    background-color: white; 
    padding-top: 8px; 
} 

.small-trick{ 
    width: 0 ; 
    height: 100%; 
    display: inline-block; 
    vertical-align: bottom;; 
} 

.navbar-header{ 
    height: 37pt; 
} 
.navbar-brand { 
    display: inline-block; 
    float: none; 
    font-size: 18px; 
    height: auto; 
    padding: 0; 
    vertical-align: bottom; 
} 
} 



<nav class="navbar navbar-default" id="navBarMain"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <div class="small-trick" ></div> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand"> 
      <img style="" src="~/images/unified_brand.png" alt="Company Logo"> 
     </a> 
    </div> 

    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
     </ul> 


     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</nav>

來源

2017-08-02 18:26:01

如何排列自舉導航欄中圖像和文字的底部？

回答

相關問題