Как центрировать навигацию?

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

Сначала удалите pull-right из div#navbar-collapse-1, затем:

.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%;}