非Bootstrap环境下导航栏（navbar）元素无法居中的技术求助

兄弟，我太懂这种明明想让导航元素居中却死活靠左的憋屈了！不用Bootstrap完全能搞定，咱们直接从CSS入手调整，给你两个靠谱的方案：

方案一：Flexbox布局（推荐，现代浏览器友好） #

这是最直观且灵活的方法，直接用Flex的属性让元素居中：

/* 重置导航容器的默认样式，确保没有多余边距 */
.topnav {
  width: 100%;
  background-color: #333; /* 加个背景方便看效果，可自定义 */
  margin: 0;
  padding: 0;
}

/* 核心：给ul设置Flex布局，实现水平居中 */
.topnav ul {
  list-style-type: none; /* 去掉默认的圆点列表样式 */
  margin: 0;
  padding: 0; /* 重点！去掉浏览器默认给ul加的左侧内边距 */
  display: flex;
  justify-content: center; /* 水平居中核心属性 */
  align-items: center; /* 垂直居中（如果导航栏有高度的话） */
}

/* 调整菜单项的间距和样式 */
.topnav ul li {
  margin: 0 15px; /* 给每个菜单项加左右间距，避免挤在一起 */
}

/* 优化链接样式 */
.topnav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 适配下拉按钮样式，确保不破坏居中布局 */
.topnav .dropdown .dropbtn {
  padding: 14px 16px;
  border: none;
  background-color: inherit;
  color: white;
  font-family: inherit;
  margin: 0;
}

/* 可选：下拉菜单的样式，按需调整 */
.topnav .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.topnav .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav .dropdown:hover .dropdown-content {
  display: block;
}

为什么这个方案有效？ #

• 用display: flex把ul变成Flex容器，justify-content: center直接让所有子元素（li）水平居中
• 重置了ul的默认padding，浏览器默认会给ul加左侧内边距，这是很多人忽略的坑！

方案二：Text-align + Inline-block（兼容旧浏览器） #

如果需要兼容IE9这类旧浏览器，可以用这个方法：

.topnav {
  width: 100%;
  background-color: #333;
  text-align: center; /* 让内部行内块元素居中 */
  margin: 0;
  padding: 0;
}

.topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0; /* 同样要去掉默认左侧内边距 */
  display: inline-block; /* 让ul变成行内块，这样父元素的text-align:center才会生效 */
}

.topnav ul li {
  display: inline-block; /* 让li横向排列 */
  margin: 0 15px;
}

/* 链接和下拉按钮样式和方案一一致 */
.topnav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav .dropdown .dropbtn {
  padding: 14px 16px;
  border: none;
  background-color: inherit;
  color: white;
  font-family: inherit;
  margin: 0;
}

关键注意点 #

• 必须把ul设置为inline-block，因为默认ul是块级元素，会占满整行，父元素的text-align:center对块级元素无效
• 同样要清除ul的默认padding-left，不然元素会看起来偏右

完整HTML示例（补全你的代码） #

把CSS放到<head>里，HTML结构如下：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Navbar</title>
  <!-- 把上面的CSS样式放在这里 -->
  <style>
    /* 方案一或方案二的CSS代码 */
  </style>
</head>
<body>
  <div class="topnav">
    <ul>
      <li><a class="active" href="index.html">Home</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</body>
</html>

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