居中菜单链接

Question

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

这里有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; */
}

Answer 2

这应该可以解决问题：

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

#menu li {
  display: inline-block;
}

居中菜单链接

Centering Menu Links

html

css

blogger

menu