Html Bootstrap 3 下拉菜单中心对齐不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25610774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 dropdown menu center align not working
提问by Matija
I am not able to align the dropdown to the center of the parent on which the dropdown is opened with hover. I have tried to text-align: center for the entire .nav .navbar li elements, and it doesn't work. I have tried to set margin and left: 50% for the entire ul.dropdown-menu that is the dropdown and it doesn't work. Here is the html code:
我无法将下拉列表与通过悬停打开下拉列表的父级中心对齐。我试图 text-align: center 整个 .nav .navbar li 元素，但它不起作用。我试图为整个 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>
In which class dropdown-menu, or nav navbar-nav, should I do the aligment, and what should I set?
我应该在哪个类的下拉菜单或导航导航栏导航中进行对齐，我应该设置什么？
回答by PaulPrecept
You can use transform to avoid having to use fixed widths:
您可以使用转换来避免使用固定宽度：
.dropdown-menu {
left: 50%;
right: auto;
text-align: center;
transform: translate(-50%, 0);
}
Answer influenced by http://css-tricks.com/centering-percentage-widthheight-elements/
受http://css-tricks.com/centering-percentage-widthheight-elements/影响的答案
回答by Devin
You can do this as long as you're willing to give the dropdown ul a fixed width. See code below:
只要您愿意为下拉菜单 ul 设置固定宽度，就可以执行此操作。见下面的代码：
.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}
First 2 declarations are for visualization purposes, but the important part is the 3rd line. You'll need to define a width (in this case 200px) and then a margin-leftequal to half the width. This will work with any width, no matter if the button is at the right, left or between elements (but of course you'll probably need some space for the buttonelement)
前 2 个声明用于可视化目的，但重要的部分是第 3 行。您需要定义一个宽度（在本例中为 200 像素），然后定义一个margin-left等于宽度的一半。这适用于任何宽度，无论按钮位于右侧、左侧还是元素之间（当然，您可能需要为button元素留出一些空间）
You can see a fiddle here
你可以在这里看到小提琴
回答by Steven Web
回答by AkaIgnotum
This is what did the trick for me:
这就是我的诀窍：
.dropdown-menu{
left: -25% !important;
}
You might need to adjust the percentage value depending on your dropdown-menu's padding etc.
您可能需要根据下拉菜单的填充等调整百分比值。
