中心對齊navstrap導航項nav

我想對齊我的導航欄項目集中水平，但他們對齊到左側。中心對齊navstrap導航項nav

有人可以提供一些幫助嗎？

這是一個桌面問題 - 只是要清楚，我在桌面級這個問題。

這裏是我當前的代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<header class="container"> 
 
    <div id="menu" class="navbar navbar-default"> 
 
     <div class="navbar-header"> 
 
      <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="glyphicon glyphicon-chevron-down"></span> 
 
      </button> 
 
     <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="nav active"><a href=".">Home</a> 
 
       </li> 
 
       <li class="nav"><a href="about.html">About</a> 
 
       </li> 
 
       <li class="nav"><a href="contact.html">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</header>

演示：https://jsfiddle.net/cjoasysz/

來源

2016-09-28 michaelmcgurk

所以要澄清，你希望所有項目的導航欄時在桌面寬度上（即不使用摺疊按鈕）放置d在中心？ – Bwolfing

@Bwolfing沒錯。因此，主頁/關於/聯繫人將位於導航區域的中心，而不是左側。 – michaelmcgurk

按照該答案的邏輯，您需要添加兩個更多的規則來處理該小提琴https://jsfiddle.net/urm4xdtf/5/ – DaniP

你可以使用CSS來對齊文本到中心。

.navbar-nav>li>a { 
    text-align: center; 
}

Demo

爲中心，您可以使用導航標籤..

.navbar-header { 
    display: inline-block; 
    float: none; 
    vertical-align: middle; 
} 
.navbar-default { 
    text-align: center; 
}

Demo 2

來源

2016-09-28 13:45:53

這並不解決「float：left」當屏幕寬度足夠大以至於不能使用摺疊按鈕時，仍然在運行 – Bwolfing

已更新我的答案。 –

謝謝@MohdAbdulMujib - 讓我的一天變得更加美好！:-D – michaelmcgurk

就在你的CSS添加此

ul.nav li { 
    text-align: center; 
}

我更新了你的小提琴： https://jsfiddle.net/cjoasysz/1/

來源

2016-09-28 13:45:21 pleinx

道歉，我的意思是在桌面級別，而不是移動。我的壞，應該詳細說明這一點。 – michaelmcgurk

那麼，對於移動你喜歡左對齊和桌面居中對齊？然後你必須在你的媒體查詢（css） – pleinx

中添加'text-align：left'我已經在這裏運行你的代碼：https://jsfiddle.net/urm4xdtf/2/並且它不會對齊我的導航項目：（ – michaelmcgurk

中心對齊navstrap導航項nav

回答

相關問題