Bootstrap 3下拉菜单居中对齐无效

Question

我无法将下拉菜单与悬停打开下拉菜单的父元素居中对齐。我尝试了为整个.nav .navbar li元素设置text-align: center，但没有效果。我还尝试了为整个下拉菜单ul.dropdown-menu设置margin和left: 50%，但也没有效果。以下是html代码：

<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
  <li><div class="btn-toolbar">
    <div class="btn-group">
      <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Made in the USA</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Human Grade</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">USDA Meats</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Our Story</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Campare</a></li>
      </ul>
    </div>
  </li>
</ul>

在哪个类别的 dropdown-menu 或 nav navbar-nav 中，我应该进行对齐，并且我应该设置什么？

- Matija

---

请提供演示和CSS。 - Paulie_D

Answer 1

您可以使用transform来避免使用固定宽度：

.dropdown-menu {
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, 0);
}

参考http://css-tricks.com/centering-percentage-widthheight-elements/的影响。

- phpMagpie

---

PaulHighten，你太棒了！非常好的解决方案。（别忘了在某个地方加上 position: absolute; ...）感谢你提供的链接。 - zipzit

更新：我只能在子内容占用的父容器宽度一半或更少时使其正常工作。 - zipzit

不适用于窄屏幕/宽下拉菜单。 - yuяi

如果有人遇到问题，可以发布代码片段，我会看一下是否能够提供更多帮助。 - phpMagpie

这个对我使用多个动态下拉菜单的问题非常有效。 - Roralee

Answer 2

只要您愿意为下拉菜单的 ul 元素设置固定宽度，就可以实现这一点。请参见下面的代码：

.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}

前两个声明是为了可视化目的，但重要的部分是第三行。您需要定义一个宽度（在本例中为200px），然后将margin-left设置为宽度的一半。这将适用于任何宽度，无论按钮是在右边、左边还是在元素之间（但是当然您可能需要一些空间来容纳button元素）。

您可以在这里查看示例

- Devin

---

我已将下拉菜单的宽度设置为140px，边距设置为-70，但它不起作用。我很快就会在编辑中添加所有的CSS。实际上，当我应用这些CSS设置时，什么也没有改变。 - Matija

可以运行，非常感谢您在这里进行调试。 - Anthony

Answer 3

唯一的、丑陋的方式是根据您的需求设置位置，如下所示：

.dropdown-menu{
    right: -25px !important;
}

Fiddle（JSFiddle）

但这不是它应该被使用的方式。请记住，您需要为所有媒体设备调整设置。

- Steven Web

Answer 4

这就是对我起作用的方法：

.dropdown-menu{
    left: -25% !important;
}

您可能需要根据下拉菜单的填充等调整百分比值。

- AkaIgnotum