css - 如何居中CSS导航菜单

请有人帮忙吗？
我如何居中此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>

最佳答案

一种方法是将#cssmenu的显示类型设置为inline-block，然后使用text-align: center将所有内容包装在容器中。您还需要在text-align: left上设置#cssmenu，以使文本再次正确对齐。

JSFiddle

关于css - 如何居中CSS导航菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23770561/