html - 如何在 HTML 中将 ul 居中

Question

我有这段 html 和 CSS 代码，我花了过去 3 个小时处理这些代码，但我仍然无法弄清楚如何在我的代码中居中对齐顶部菜单栏。代码如下:

#container ul {
  list-style: none;
  margin: auto;
  padding: 0;
}

#container ul li a {
  color: #FFFFFF;
}

#container ul li {
  background-color: #6068FF;
  width: 180px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  align-items: center;
  color: #FFFFFF;
  font-size: 18;
}

#container ul li:hover {
  background-color: #0BF5F5;
}

<div id="container">
  <ul>
    <li><a style="text-decoration:none;" href="default.asp">Student Attendance</a></li>
    <li><a style="text-decoration:none;" href="news.asp">Edit Students</a></li>
    <li><a style="text-decoration:none;" href="contact.asp">Profile</a></li>
    <li><a style="text-decoration:none;" href="about.asp">Logout</a></li>
  </ul>
</div>

Answer 1

这是您更新后的 CSS:

已添加 text-align: center在 <ul> 上标签。

#container ul {
    ...
    text-align: center;
}

已删除 float: left , 并添加了 display: inline-block在 <li>标签。

#container ul li {
   display: inline-block;
   ...
   /* float: left; */
}