如何使Twitter Bootstrap中的导航下拉菜单居中显示？

Question

我正在使用 Twitter Bootstrap 制作一个主题，我想把下拉导航居中显示而不是靠左对齐。需要说明的是：我想让整个下拉框相对于其父元素居中，而不是让框内文本居中。

标记如下：

<ul id="nav" class="nav ww-nav pull-right hidden-phone">
  <li class="active"><a href="#">Words</a></li>
  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Published</a></li>
        <li><a href="#">Categorized</a></li>
        <li><a href="#">Uncategorized</a></li>
        <li><a href="#">Award Winning</a></li>
    </ul>                   
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>   

为了澄清我的意思，我将附上一个屏幕截图：

注意： 我正在寻找通用解决方案，适用于不同的父项。 由于这是一个主题，导航项可以是从3个字符到20个字符宽的任何内容。 不幸的是，简单的X像素边距并不能满足要求。
PS：根据评论的要求，我将整个内容放在了JSFiddle上：http://jsfiddle.net/zdCYX/4/
谢谢

- Alexander Rechsteiner

---

你想要居中元素吗？ - Shail

@Shail：不是元素，我指的是整个绿色框。 - Alexander Rechsteiner

@abbood：我在问题中更新了jsfiddle链接，请在最后查看。 - Alexander Rechsteiner

@Mint Buddy，我已经发布了一个 jsfiddle，请检查。 - Shail

Answer 1

我使用jQuery解决了这个问题，通过计算和调整每个子菜单的margin-left来实现。

这样我的导航项之间就有相同的间距。

document.onreadystatechange = function() {
    if (document.readyState === 'complete') {
        $("ul.ww-nav ul.dropdown-menu").each(function(){
            var parentWidth = $(this).parent().innerWidth();
            var menuWidth = $(this).innerWidth();
            var margin = (parentWidth / 2 ) - (menuWidth / 2);
            margin = margin + "px";
            $(this).css("margin-left", margin);
        });
    }
}

- Alexander Rechsteiner

---

当我在li项之间设置了固定宽度时，如何出现不规则的空格？ - Shail

无论如何，它们之间的填充和边距将始终相同，因为它们具有相同的类。 - Shail

@Shail：这正是为什么项目之间存在不规则空格的原因。你将宽度固定为116px，因此当项目具有不同的字符长度时，它会显示不规则。只需查看您自己的JSFiddle演示即可：Link和Link之间的空格比Link和Dropdown之间的空格更大（对于Dropdown而言，其具有更多字符）。 - Alexander Rechsteiner

谢谢你分享这个代码片段，它真的帮助了我的大脑。我可以建议你使用var声明所有本地变量吗？（例如：var parentWidth，var menuWidth）在这里，它们被声明为全局变量，如果有人不加思考地复制和粘贴这些代码，可能会干扰其他代码！ - Chris S

@ChrisS：当然，你是完全正确的。我更新了代码片段。 - Alexander Rechsteiner

Answer 2

Jsfiddle 浏览器中的演示
你可以将主导航元素的宽度设置为下拉菜单的宽度，如下所示：

 .navbar .nav > li {

   width: 116px;
     }

.dropdown-menu {
      display:none;
      width:116px;
      min-width:116px;
      margin:0 auto;
  }

您需要更改以下代码的对齐元素。

.dropdown-menu > li > a {
         text-align:center;
}

- Shail

---

这只是将文本居中于下拉菜单内部，而不是整个下拉菜单。我已经完成了这一步骤（请参见截图）。 - Alexander Rechsteiner

请查看我问题中的最后一段。固定偏移量是无法帮助的，因为父级项目可以是任意大小（它是一个主题）。它应该在不调整每个下拉菜单的CSS的情况下工作。 - Alexander Rechsteiner

谢谢Shail，但这仍然使用固定宽度，因此不太适用于宽度不同的项目。另外，在您的演示中，顶部导航项之间的空格是不规则的。我通过使用Javascript解决了这个问题。请查看我的答案。 - Alexander Rechsteiner