html - twitter bootstrap - 居中的导航栏

Question

我有点困惑。我喜欢将普通引导导航栏的菜单项居中。
但我找不到我必须编辑的正确课程。我应该使用text-align，还是margin: 0 auto;实现这样的事情？

目前我试图在和中添加这个.navbarCSS.navbar-inner参数.nav。没有任何效果。

如果有一些引导开发，请帮助我！

你知道是否有引导程序的论坛吗？

score 1 · Accepted Answer

分配固定高度，然后分配margin: 0 auto;给您必须居中的元素，但请记住中心div不应该是floated或position: absolute;并且它具有固定宽度 ，例如

 <div class="parent">
      <div class="inn"> ... </div>
    </div>

居中.inn应该有固定的宽度，而不是floated or position: absolute，即

.inn{
  width: 20px;
  margin: 0 auto;}

score 0 · Accepted Answer

您可以尝试执行以下操作：

#div-id-inside-navbar{
  left: 50%;
  position: absolute;
  margin-left: -100px /* This should be half the width of your centered content */
}

我在我的引导站点上将徽标居中，这就是我必须做的。我还没有调查确切的原因，但我不相信text-align: center;它工作得那么好。这类似于人们经常使用 CSS 垂直居中的方式。

score 0 · Accepted Answer

要回答您的问题，您应该修改的选择器看起来是.navbar .nav

修改该选择器，您可以继续实施您的保证金方法：

.navbar .nav {
    margin: 0 auto;
    width: ...px;     /* width of .navbar .nav */
    float: none;
}

或者，类似于尼克提到的：

.navbar .nav {
    position: absolute;
    left: 50%;
    margin-left: ...px; /* half of width of .navbar .nav */
}

我没有深入研究这个，但它看起来像是.navbar .nav得到了一个与之相关的宽度（对我来说，它是 1170 像素）。由于它的宽度，margin: 0 auto没有影响......想出一个不需要硬编码宽度（或半角左边距）的解决方案会很好。

3 回答 3