中心对齐父菜单中的Bootstrap下拉菜单

Question

据我所知，有几个帖子标题相同。但是这些帖子对我来说都不是很好。

我的测试网址：URL

我已经使用Bootstrap 3在这里构建了菜单。

我想要完成的是下拉列表应该居中对齐。

到目前为止我尝试了什么：

.navbar-nav > li > .dropdown-menu{
 left : -50%;
}

但是它将菜单推到最左边。

下拉菜单目前左对齐。任何人都可以让我知道为什么一个left: -50%值将它推向极左，这实际上不应该发生？

Answer 1

请使用以下CSS作为规则：

#navbar.navbar-collapse.collapse .dropdown.open .dropdown-menu {
  left: 50%;
  margin-left: -91px;
}

原因是：

• 下拉菜单的宽度= 182px。
• 保持left: 50%将使其从中心开始。
• 从中心开始，它必须行进width的一半，即91px。

注意：如果<{1}}无效，可以将!important置于left，但这只是暂时的固定。

Answer 2

嗯，

的组合

left: 50% !Important;
transform: translate(-50%) !important;

工作!!谢谢!!