Bootstrap 3下拉菜单中心对齐不起作用

Question

我无法将下拉列表与悬停下拉列表的父级中心对齐.我试过text-align:center为整个.nav .navbar li元素,但它不起作用.我试图设置保证金和左:50%的整个ul.dropdown菜单是下拉列表,但它不起作用.这是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>

我应该在哪个类下拉菜单或nav navbar-nav中进行对齐,我应该设置什么？

Answer 1

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

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

受http://css-tricks.com/centering-percentage-widthheight-elements/影响的答案

Answer 2

你可以这样做,只要你愿意给下拉ul一个固定的宽度.见下面的代码:

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

前2个声明用于可视化目的,但重要的部分是第3行.您需要定义宽度(在本例中为200px),然后margin-left等于宽度的一半.这将适用于任何宽度,无论按钮位于右侧,左侧还是位于元素之间(当然,您可能需要一些空间用于button元素)

你可以在这里看到一个小提琴

Answer 3

唯一丑陋的方法是根据您的需要设置位置，例如：

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

小提琴

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