twitter bootstrap - 居中的导航栏答案

【问题标题】：twitter bootstrap - centered navigation bartwitter bootstrap - 居中的导航栏
【发布时间】：2012-09-29 14:49:51
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

分配固定高度，然后将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;}

【讨论】：

【解决方案2】：

要回答您的问题，您应该修改的选择器似乎是 .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】：

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

#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 垂直居中的方式。

【讨论】：