jquery - 如何将这些导航项居中？

我有这个jsfiddle，您可以看到导航项向左对齐。有没有一种方法可以使这些项目居中而与导航项无关，因为当用户登录时，我还会有一个导航项...任何想法

这是我的html

<div id="cssmenu">
<ul>
  <li><a href="#"><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 Product</span></a></li>
              <li><a href="#"><span>Sub Product</span></a></li>
           </ul>
        </li>
        <li class="has-sub "><a href="#"><span>Product 2</span></a>
           <ul>
              <li><a href="#"><span>Sub Product</span></a></li>
              <li><a href="#"><span>Sub Product</span></a></li>
           </ul>
        </li>
     </ul>
  </li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Contact</span></a></li>
 </ul>
 </div>​

最佳答案

如果要使li和display:block为relative（也许要给它们相同的宽度），则可以通过li定位获得正确的想法，只需添加以下属性：

#cssmenu ul {
    left: 50%;
}
#cssmenu ul li{
    right: 50%;
}

如果不是，则使您的display:inline只需删除所有其他内容，然后简单地执行以下操作：

#cssmenu { text-align: center; }
#cssmenu ul { list-style: none; }
#cssmenu ul li { display: inline; }