javascript - 下拉列表不会与下拉按钮垂直对齐

我有一个下拉按钮，单击该按钮后会为用户下拉选项列表，我将其放在一列中，但我希望它在该列的中央。我使用text-align: center;来实现此目的，但是当我实际单击按钮时，该列表会下拉到按钮的左侧，而不是直接在按钮的下方。我已经尝试过对列表进行样式设置，但似乎没有任何变化。我不确定text-align: center;是否是居中此元素的正确方法。我正在使用Javascript来切换列表，所以我也尝试设置了类的样式
函数执行时，将添加<div class=dropdown open>作为类open。代码如下：

<div id="option-selection">
                <h3>Select an Option</h3>
                <div class="dropdown">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Available Options&nbsp&nbsp<span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                  </ul>
               </div><!--dropdown-->
</div><!--option selection-->

下拉按钮的CSS：

#option-selection {
text-align: center;
padding-top: 5px;
padding-bottom: 25px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

最佳答案

将.dropdown的显示设置为嵌入式块，以便将其边界框设置为其内容的大小。

#option-selection .dropdown {
  display:inline-block;
}

此处的实时示例：http://www.bootply.com/L6evJPHbRe

关于javascript - 下拉列表不会与下拉按钮垂直对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32506996/