html - 居中菜单链接

Question

我试图将菜单链接居中，但我做不到。 (Link to my website)。正如您所注意到的，“主页”和“员工”链接在页面左侧对齐，但我希望它们居中。 (如果可能，用百分比)

这里有 CSS 代码

/*Navigation*/

   #menu {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      list-style: none;
      background-color: #1C1C1C;
       margin-top:85px;
}
   #menu li {
      float: left; }
   #menu li a {
      display: block;
      padding: 30px 30px;
      text-decoration: none;
      font-weight: bold;
      color: #fff;
      transition: background-color 0.5s ease;
      transition: color 0.5s ease;
       }
   #menu li a:hover {
      color: #69bfe7;
      background-color: #2E2E2E;
      transition: background-color 0.5s ease; 
      transition: color 0.5s ease;
      }

这里是 HTML 代码

   <!-- Here's all it takes to make this navigation bar. -->
   <ul id='menu'>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Staff</a></li>
     </ul>
   <!-- That's it! -->

Answer 1

试试这个:

#menu {
    background-color: #1c1c1c;
    float: left;
    list-style: outside none none;
    margin: 85px 0 3em;
    padding: 0;
    text-align: center;
    width: 100%;
}

#menu li {
   display: inline-block;
    /*  float: left; */
}