中心对齐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

回答

相关问题