如何在Bootstrap中使用CSS在導航品牌類中加載徽標並使其居中？

所以這裏是我的網站的鏈接CLICK HERE 如何在Bootstrap中使用CSS在導航品牌類中加載徽標並使其居中？

我用我發現的一個隨機標誌來演示我正在嘗試做什麼。可以看出標誌在未在

我使用的代碼如下因素代碼以產生所述導航欄

<!-- Start navbar --> 
<div class="navbar navbar-fixed-top"> 
    <div class="container"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <!-- <a class="navbar-brand" href="#">NBWS</a> --> 
    <a class="navbar-brand pull-left"> 
    <a href="#"><img class = "brand" src="https://s3.amazonaws.com/sprc-www/img/logo.png" alt="SparkCharger" /></a> 
    </a> 

     <!-- Dropdown menu --> 
     <ul class="nav navbar-nav pull-right"> 
     <ul class="nav navbar-nav"> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="forecast.html">Forecast</a></li> 
     <li><a href="Links.html">Links</a></li> 
     </ul> 
     <li class="dropdown"> 
      <a href="#" class="dropdown" data-toggle="dropdown">About <b class="caret"></b></a> 
      <ul class="dropdown-menu pull-right"> 
      <li class="active"><a href="theteam.html">The Team</a></li> 
      <li><a href="thisstation.html">The Weather Station</a></li> 
      </ul> 
     </li> 
     </ul> 

    </div><!--/.nav-collapse --> 
    </div> 
</div>

和此自定義css來調整圖像的大小

/* Important for logo */ 
.brand {height: 25px;}

導航欄垂直居中

任何想法如何居中圖像？

來源

2013-08-22 OfficialBenWhite

添加img.brand {邊距：13像素;}到你的about.css –

現在，在您錨添加line height鏈接和Display inline-block像這樣

.navbar-brand.pull-left+a { 
display: inline-block; 
vertical-align: top; 
line-height: 50px; 
}

結果是這樣的

enter image description here

來源

2013-08-22 12:56:27

如何在Bootstrap中使用CSS在導航品牌類中加載徽標並使其居中？

回答

相關問題