24

我无法将下拉菜单与通过悬停打开下拉菜单的父级中心对齐。我试图 text-align: center 整个 .nav .navbar li 元素，但它不起作用。我试图设置边距并离开：整个 ul.dropdown-menu 的 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>

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

4

4 回答 4

80

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

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

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

于 2015-01-21T22:30:34.937 回答
5

只要您愿意为下拉菜单 ul 提供固定宽度，就可以这样做。请参见下面的代码：

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

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

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

于 2014-09-01T18:22:59.833 回答
1

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

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

小提琴

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

于 2014-09-01T18:06:01.613 回答
0

这就是我的诀窍：

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

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

于 2019-12-08T11:17:34.530 回答