下拉列表不会与下拉按钮垂直对齐答案

【问题标题】：Dropdown list won't align vertically with dropdown button下拉列表不会与下拉按钮垂直对齐
【发布时间】：2015-12-07 01:01:27
【问题描述】：

我有一个下拉按钮，单击该按钮会下拉用户的选项列表，我将它放在列中，但我希望它位于列的中心。我使用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;
}

【问题讨论】：

vertical-align with bootstrap 3的可能重复
不是同一个问题，我看过那个讨论
它有同样的答案：“Bootstrap 并不完美，你必须编写一些自己的 CSS 来解决一些问题，记住你总是可以使用自定义类”。 Bootstrap 并不是解决所有 css 问题的灵丹妙药，我们不是来为你做你的工作的。
Bootstrap 3 dropdown menu center align not working的可能重复
如果你清楚地阅读了这个问题，我说过我试图设置列表的样式但无法让它工作，所以实际上如果我们要进入语义，那么我已经尝试了确切的答案帖子说要做：“写一些你自己的CSS来解决一些问题”。我无法让它工作，因此有了新文章。

标签： javascript html css twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

谢谢！这是有道理的。
确实是最优雅的解决方案，尽管其他解决方案也可以。

【解决方案2】：

这解决了列表宽度的问题。

   .open>.dropdown-menu{
        text-align: center;
        left: 50%;
        transform: translate3d(-50%,0,0);
    }

http://codepen.io/Saar/pen/EVVZPE

text-align: center; 只需确保选项本身的文本也与中心对齐。

【讨论】：

【解决方案3】：

如果您知道选择列表的宽度，则可以覆盖 Bootstrap CSS，该 CSS 将元素绝对定位到左侧，添加一些额外的 CSS：

.open>.dropdown-menu {
    width: 160px;
    left: 50%;
    margin-left: -80px;
}

在此处查看演示 https://jsfiddle.net/Lrogdbr4/2/

【讨论】：

【解决方案4】：

您可以尝试使用它来覆盖 twitter bootstrap .dropdown-menu 类。

.dropdown-menu {
    position: relative;
    left: auto !important;
    float: none !important;
    margin: auto;
}

或者

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

.dropdown-menu {
    position: absolute;
    left: auto;
    float: none;
}

【讨论】：