如何居中CSS導航菜單

Question

請有人可以幫忙嗎？ 我該如何居中這個CSS菜單？ 請參閱下面的代碼開頭 無論我嘗試什麼似乎都不起作用。 我確定它確實很簡單，但我無法弄清楚。 在此先感謝！

#cssmenu { 
    position: relative; 
    height: 44px; 
    background: #ffffff; 
    width: auto; 
    float: left; 
} 
#cssmenu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    line-height: 1; 
    position:relative; 
    display: inline-block;  
    vertical-align: top; 
} 
#cssmenu > ul { 
    position: relative; 
    display: block; 
    background: #ffffff; 
    height: 32px; 
    width: 100%; 
    z-index: 500; 
} 
#cssmenu > ul > li { 
    display: block; 
    position: relative; 
    float: left; 
    margin: 0; 
    padding: 0; 
    position:relative; 
} 
#cssmenu > ul > #menu-button { 
    display: none; 
} 
#cssmenu ul li a { 
    display: block; 
    font-family: 'Noto Sans'; 
    text-decoration: none; 
} 
#cssmenu > ul > li > a { 
    font-size: 14px; 
    font-weight: bold; 
    padding: 15px 20px; 
    color: #000000; 
    text-transform: uppercase; 
    -webkit-transition: color 0.25s ease-out; 
    -moz-transition: color 0.25s ease-out; 
    -ms-transition: color 0.25s ease-out; 
    -o-transition: color 0.25s ease-out; 
    transition: color 0.25s ease-out; 
} 
#cssmenu > ul > li.has-sub > a { 
    padding-right: 32px; 
} 
#cssmenu > ul > li:hover > a { 
    color: #000000; 
} 
#cssmenu li.has-sub::after { 
    display: block; 
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 0; 
} 
#cssmenu > ul > li.has-sub::after { 
    right: 10px; 
    top: 20px; 
    border: 5px solid transparent; 
    border-top-color: #000000; 
} 
#cssmenu > ul > li:hover::after { 
    border-top-color: #000000; 
} 

HTML

<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Products</span></a> 
     <ul> 
     <li class='has-sub'><a href='#'><span>Product 1</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'><a href='#'><span>Product 2</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

Answer 1

這樣做的一種方法是將#cssmenu的顯示類型設置爲inline-block，然後用text-align: center將所有內容都包裝在容器中。您還需要在#cssmenu上設置text-align: left，以便文本再次正確對齊。

JSFiddle

Answer 2

好吧，我會假設你的HTML中，#cssmenu元素是您要中心之一。 正如其他人所說，塊元素可以通過使用width:和margin: 0 auto居中。

這裏的困境是，如果你爲它設置一個寬度，那麼你必須調整寬度，每當菜單項發生變化時，我所做的就是讓它沒有width屬性，只增強它（居中）爲用戶支持JS。

如果使用jQuery，你可以做這樣的事情：

function navCenter(){ 
    if($('#cssmenu').length){ 
    var ulWidth = 0; 
    $('#cssmenu > ul > li').each(function(){ 
     ulWidth += $(this).outerWidth(true); 
    }); 

    $('#cssmenu').css('width', ulWidth); 
    } 
} 

所以上面這段代碼設置#cssmenu元件上的寬度和CSS應用一個margin: 0 auto，定心它。

讓我知道這是否有意義。

Answer 3

這是你如何中心，在一個容器中所有的列表項的UL不JS或jQuery的。如果列表項目被更改，則無需調整某些內容。

<div class="menuwrapper"> 
    <ul class="nav"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
    </ul> 
</div> 

.menuwrapper { 
    width: 100%; 
    text-align: center; 
} 

.nav, .nav li, .nav a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

.nav { 
    float: left; 
    position: relative; 
    left: 50%; 
    top: 0; 
    list-style-type: none; 
    text-align: center; 
} 

.nav li { 
    float: left; 
    width: auto; 
    right: 50%; 
    display: block; 
    position: relative; 
    list-style-type: none; 
    cursor: pointer; 
} 

.nav a { 
    display: block; 
    padding: 8px 10px; 
    text-decoration: none; 
    font: bold 16px arial,sans-serif; 
    line-height: 1; 
    outline: 0; 
}