如何居中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; 
}