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;
}

居中菜单链接

2 个答案: