html - 在数据切换中心显示菜单

Question

我有这个代码:

<button type="button" class="btn btn-success open">      
    <i class="icon-comment"></i>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        About the Library                                         
    </a>                                        
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" tabindex="-1" role="menuitem">Library Hours</a></li>
        <li><a href="#" role="menuitem">Board of Visitors</a></li>
        <li><a href="#" role="menuitem">Department and Staff</a></li>                    
        <li><a href="#" role="menuitem">Direction Maps</a></li>                    
        <li><a href="#" role="menuitem">Equipment</a></li>
        <li><a href="#" role="menuitem">Floor Plans</a></li>
        <li><a href="#" role="menuitem">Information and Policies</a></li>
        <li><a href="#" role="menuitem">Mission and Vision</a></li>
    </ul>    
</button>

这是我唯一的 CSS 代码:

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a
{
    background-image: none;
    background-color: #0C6A13;
}

这是它的样子:

我有一个标签为“关于图书馆”的按钮作为我的数据开关。当我点击我的数据开关时，菜单总是显示在左侧。我希望它显示在中心。我将如何做？非常感谢任何帮助。

Answer 1

这是一种方法，但您必须指定宽度:

Bootstrap :http://www.bootply.com/79wWifpDzR

CSS:

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a
{
    background-image: none;
    background-color: #0C6A13;
}

.dropdown-menu{
 left:0 !important;
 right:0 !important;
    text-align:center;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 200px;    
  }

HTML:

<button type="button" class="btn btn-success open dropdown">      
    <i class="icon-comment"></i>
    <a class="dropdown-toggle" data-toggle="dropdown">
        About the Library                                         
    </a>                                        
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" tabindex="-1" role="menuitem">Library Hours</a></li>
        <li><a href="#" role="menuitem">Board of Visitors</a></li>
        <li><a href="#" role="menuitem">Department and Staff</a></li>                    
        <li><a href="#" role="menuitem">Direction Maps</a></li>                    
        <li><a href="#" role="menuitem">Equipment</a></li>
        <li><a href="#" role="menuitem">Floor Plans</a></li>
        <li><a href="#" role="menuitem">Information and Policies</a></li>
        <li><a href="#" role="menuitem">Mission and Vision</a></li>
    </ul>    
</button>