中心引导下拉菜单答案

【问题标题】：Center bootstrap dropdown menu中心引导下拉菜单
【发布时间】：2014-07-18 23:31:18
【问题描述】：

我在将下拉菜单按钮居中时遇到问题。我在ASP.NET MVC 5 中使用引导程序。

这里是html代码：

            <div class="navbar-center">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">HR Online<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Job Postings</a></li>
                            <li><a href="#">HR Manual</a></li>
                            <li><a href="#">Training</a></li>
                            <li><a href="#">Benefits</a></li>
                        </ul>
                    </li>

我使用包含整个下拉菜单的 div。它的类名是“navbar-center” 我可以使用填充它会工作。但我不认为这是最有效的居中方式。

我使用过align-content、align-items 和align-self。它们都不起作用。我必须坚持padding吗？

注意：它不是我要对齐的文本，而是按钮。（您在下拉菜单之前按下的按钮）

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

只需使用 text-align: 将锚点居中

.dropdownmenu > li > a {
   text-align: center;

}

引导层：http://www.bootply.com/oHwP1hHbnq

【讨论】：

这不是我要对齐的文本。是按钮。
您的意思是您有多个要居中的下拉菜单（您的示例只有一个）？将它们包装到一个容器中 (
)。