如何仅用HTML和CSS居中导航栏元素（不使用Flex/Grid）

问题根源是浏览器默认给<ul>元素设置了padding-left，这个默认内边距会让列表内容整体偏右，抵消了text-align: center的居中效果。只需要给<ul>清除默认内边距就能解决，完全不用Flex/Grid或JavaScript。

修改后的完整代码 #

CSS代码

body {
  /* 清除页面默认外边距 */
  margin: 0px;
}

#navigation {
  /* 测试用背景色 */
  background-color: pink;

  /* 导航栏容器居中并设置宽度 */
  margin: 0px auto;
  width: 500px;
}

ul {
  /* 文本居中 */
  text-align: center;

  /* 清除默认列表符号 */
  list-style-type: none;

  /* 关键：清除ul默认左内边距 */
  padding: 0;
}

li {
  background-color: rgb(63, 76, 217);

  /* 横向排列列表项 */
  display: inline-block;
  padding: 5px;
}

HTML代码

<header id="navigation">
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Students</a></li>
    <li><a href="#">Administration</a></li>
    <li><a href="#">Teachers</a></li>
    <li><a href="#">Sign Up</a></li>
  </ul>
</header>

效果截图 #

内容的提问来源于stack exchange，提问作者Anonymous Man