Html 中央引导导航栏--不理解导航为什么获胜'；t中心

今天我刚开始学习bootstrap，我在这一页上使用了他们的示例

如您所见，如果转到该页面，导航将向左对齐。我尝试使用我在普通CSS中所做的，即：

右边距：自动

和

左边距：自动

我也试过了

文本对齐：居中

这两个都不起作用，我已经阅读了他们的导航文档，我不明白我在这里应该做什么不同

下面是该导航页面的代码。我尝试将标签一次单独放入所有4个导航容器中：

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header" >
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 1px;margin: auto;text-align: center;">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>

切换导航

如果你想让

导航栏导航

居中，那么你必须播放一点。向其添加以下样式：

.navbar-nav {
    float: none;
    margin: 0 auto;
    display: table;
    position: relative;
    left: -135px; /* the width of the .navbar-brand class in negative px */
}

---

我发现，每当我无法将一个元素精确地与引导对齐时，添加一个位置：relative和left:x%；或右：x%；把它拿到你想要的地方

例如：

<div class="navbar-collapse collapse" style="position:relative; left:{add-a-small-number-and-adjust-until-you-get-it-where-you-want-it}%;"> 

---

引导程序中只有两个导航方向，左侧或右侧。要使导航栏居中，有两种方法。这就是我为其中一个所做的。以下是两个示例链接：

这是上述内容的修改版本。我不知道你在用这个标志干什么

演示1：

---

这是另一种方法： 演示2：

---

默认情况下它不是居中的吗？@ecbrodie从上面的演示链接看，它似乎不是居中的，而是左对齐的。它看起来像大多数的例子，在免费模板网站上，它默认向左对齐。由于导航中充满了浮点数和浮点数，所以您尝试过的所有方法都不起作用！很重要，很好的方法。谢谢。@Ravimallya：我这里有另一个，它是用于另一个配置：第一个是以前为其他工作做的，第二个只花了几分钟，因为我熟悉较少的文件。

@media (min-width:768px) { 
/* centered navigation */
 .nav.navbar-nav {
     float: left;
 }
 .nav.navbar-nav {
     clear: left;
     float: left;
     margin: 0;
     padding: 0;
     position: relative;
     left: 50%;
     text-align: center;
 }
 .nav.navbar-nav > li {
     position: relative;
     right: 50%;
 }
 .nav.navbar-nav li {
    text-align: left
 }
}

@media (min-width:768px) { 
 .navbar > .container {
    text-align: center;
 }
 .navbar-header {
    float: none;
    display: inline-block;
 }
 .navbar-brand {
    float: none;
    display: inline-block;
 }
 .navbar .navbar-nav {
    float: none;
    display: inline-block;
    clear: none;
 }
 .navbar .navbar-nav > li {
    float: none;
    display: inline-block;
 }
 .navbar .navbar-nav > li li {
    text-align: left
 }
 /*add id of centerednav on the collapse or it won't work*/
 .collapse.navbar-collapse#centerednav {
    float: none;
    display: inline-block!important;
    width: auto;
    clear: none;
 }
}