如何使导航居中？

Question

我正在尝试自定义 Wordpress 主题的导航。

我已经尝试了所有方法，但导航没有居中。我已经用text-align: center; display: inline; display: inline-block. 试过了，即使用margin: 0 auto; 似乎也没有任何效果。

也许我在错误的地方应用了规则？

感谢您的帮助。

这是 HTML 代码：

    <div class="menu_main">
        <div class="navbar yamm navbar-default">
            <div class="navbar-header">
                <div class="navbar-toggle .navbar-collapse .pull-right " data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span>Menu</span>
                    <button type="button"> <i class="fa fa-bars"></i></button>
                </div>
            </div>
            <div id="navbar-collapse-1" class="navbar-collapse collapse pull-right">
                <nav id="navigation">
                    <div class="menu-top-navigation-container">
                        <ul id="king-mainmenu" class="nav navbar-nav">
                            <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-18 yam-fwr"><a href="http://www.brodreneskogen.no/om-oss/">OM OSS</a></li>
                            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-19 yam-fwr"><a href="#">VAREUTVALG</a></li>
                            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-20 yam-fwr"><a href="http://www.brodreneskogen.no/historie/">HISTORIE</a></li>
                            <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-21 yam-fwr"><a href="#">VINBLOGG</a></li>
                            <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-22 yam-fwr"><a href="http://www.brodreneskogen.no/kontakt/">KONTAKT</a></li>
                            <li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-209 yam-fwr"><a href="#">TEST 1</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
         </div>
     </div> 

这是 CSS：

    .menu_main{
        float: none !important;
        text-align: center !important;
        width: 100% !important;
        z-index: 9999;
    }

.navbar-default{
    margin-right: 0px !important;
}

.navbar{
    position: relative;
    margin-bottom: 0px;
    border: 0px solid transparent;
}

.navbar-header{
    float: left;
}

div#navbar-collapse-1.navbar-collapse.collapse.pull-right{
    z-index: 10000 !important;
}

.navbar-collapse.collapse{
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important
}

.pull-right{
    float: right !important;
}

nav#navigation{
    text-align: center;
}

nav{
    display: block;
}

.menu-top-navigation-container{
    float: none !important; 
    text-align: center !important;
}

.navbar-nav{
    float: none !important;
    margin: 0 auto !important;
    width: 90% !important;
}

.nav>li{
    display: inline !important;
}

.navbar-nav>li{
    float: left;
}

Answer 1

删除浮点形式 ul 和 li 和 text-center 类 navbar-collapse

CSS:
.navbar-nav{
       float: none;
    }
    .navbar-nav > li {
        display: inline-block;
        float: none;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <div class="menu_main">
            <div class="navbar yamm navbar-default">
                <div class="navbar-header">
                    <div class="navbar-toggle navbar-collapse pull-right " data-toggle="collapse" data-target="#navbar-collapse-1">
                        <span>Menu</span>
                        <button type="button"> <i class="fa fa-bars"></i></button>
                    </div>
                </div>
                <div id="navbar-collapse-1" class="navbar-collapse collapse text-center">
                    <nav id="navigation">
                        <div class="menu-top-navigation-container">
                            <ul id="king-mainmenu" class="nav navbar-nav">
                                <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-18 yam-fwr"><a href="http://www.brodreneskogen.no/om-oss/">OM OSS</a></li>
                                <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-19 yam-fwr"><a href="#">VAREUTVALG</a></li>
                                <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-20 yam-fwr"><a href="http://www.brodreneskogen.no/historie/">HISTORIE</a></li>
                                <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-21 yam-fwr"><a href="#">VINBLOGG</a></li>
                                <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-22 yam-fwr"><a href="http://www.brodreneskogen.no/kontakt/">KONTAKT</a></li>
                                <li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-209 yam-fwr"><a href="#">TEST 1</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
             </div>
         </div> 


    

Answer 2

您是否查看过其他规则是否没有覆盖您的规则？

也许您可以尝试将!important 放入您的规则中，看看这是否有效。像这样：text-align: center !important;。它将优先于其他规则。

Answer 3

先从div#navbar-collapse-1中删除pull-right，然后：

.menu-top-navigation-container{
   text-align:center;
}
.navbar-nav {
    float: none;
    display: inline-block;
}

Answer 4

尝试：

ul.king-mainmenu {text-align:center;  display: table;  float: none; margin: 0 auto;}

ul.king-mainmenu > li { display: inline; float:left; }

.menu_main { float:left;width:100%;}