Html 将下拉按钮和下拉菜单放在中心位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38419705/
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
position dropdown button and dropdown menu in center?
提问by azam
<div class="dropup center-block">
<button class="btn btn-info dropdown-toggle center-block" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Me<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropup stuff</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
added center-blockto both div and button, but unable to get the dropup menu positioned center.
添加center-block到 div 和按钮，但无法将下拉菜单置于中心。
A similar thing can be found at "Dropdown Position" in this page. The button is aligned left, but the menu is right. I'm able to align the menu right but not center.
类似的东西可以在本页的“下拉位置”中找到。按钮左对齐，但菜单右对齐。我能够将菜单右对齐但不能居中。
Please help!
请帮忙！
回答by mihkov
A little trick add some css rules,text-centerwith dropdownclass and dropdown-menu-centerto the list.
一个小技巧，添加一些 css 规则，text-center带有dropdown类和dropdown-menu-center列表。
source: https://stackoverflow.com/a/28078054/6142097
来源：https: //stackoverflow.com/a/28078054/6142097
.dropdown-menu-center {
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="container">
<h2>Dropdowns</h2>
<div class="dropdown text-center">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-center">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>回答by dresdain
Try adding a margin-left
尝试添加一个 margin-left
<div class="dropup center-block" style="margin-left: 49%;">
回答by Redet Getachew
The solution is to use 'dropdown-menu-center" class instead of 'center-block'.
解决方案是使用“下拉菜单中心”类而不是“中心块”。
回答by Taj Khan
here is your solution https://jsfiddle.net/7urwr62j/
这是您的解决方案 https://jsfiddle.net/7urwr62j/
<div class="text-center">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
<style>
.dropdown{
display: inline-block;
}
</style>
