如何居中導航？

我正在嘗試自定義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; 
}

來源

2016-06-22 dahlsdata-tahira

您向我們展示的圖畫書，但不是你正在使用的蠟筆。沒有CSS，我們無法提供幫助。 – Rob

請爲此提供css。 –

這看起來像是基於引導程序..所以第一件事就是刪除浮標 –

刪除浮動形式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>

來源

2016-06-22 12:21:27

這樣做的工作。非常感謝！ –

沒有倒帶，如果其他規則不覆蓋您的規則？

也許你可以嘗試把!important到你的規則，看看這項工作。像這樣：text-align: center !important;。它將優先考慮其他規則。

來源

2016-06-22 12:16:41 Firefly

**這真的是一個評論，而不是一個答案**我明白，您可能還沒有足夠的聲望留下評論，但請不要將答案系統用作替代品。獲得聲譽相當容易，只需要您一點點努力。謝謝！ –

我看着名聲系統，它說我們需要投票回答問題或發佈問題。我不會僅僅爲了獲得聲望而發佈問題，那我該怎麼辦？如果人們沒有提供足夠的信息，我不得不等待人們索要更多的信息，但我不會在這篇文章中整天留下這樣的答案：/對我來說，這似乎是唯一的解決方案。 – Firefly

如果你沒有聲望，你只有在你掙得夠多的時候才能評論。 –

首先從div#navbar-collapse-1刪除pull-right，則：

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

來源

2016-06-22 12:20:26 blonfu

-1

嘗試：

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

來源

2016-06-22 12:29:59

這恐怕不適合我。謝謝你的幫助！ –

如何居中導航？

回答

相關問題