如何修改CSS代码使顶部导航栏从左侧移至页面顶部居中？

你的问题核心在于原代码里的.topnav a用了float: left，浮动元素会脱离正常文档流，导致你设置的text-align: center等样式无法生效；另外如果你的HTML结构中.topnav下并没有<ul>标签，那针对.topnav ul的样式自然不会起作用。

下面提供两种可行的修复方案：

方案一：使用Flex布局（推荐，现代浏览器支持良好） #

修改.topnav的样式，利用Flex实现居中，同时去掉.topnav a的浮动属性：

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  /* 新增Flex相关属性 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（可选，让链接在导航栏里垂直居中） */
}

/* Style the links inside the navigation bar */
.topnav a {
  /* 去掉float: left */
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* 其余样式保持不变 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

方案二：使用inline-block布局（兼容旧浏览器） #

如果需要兼容不支持Flex的旧浏览器，可以用这种方法：

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  text-align: center; /* 让内部inline-block元素居中 */
}

/* Style the links inside the navigation bar */
.topnav a {
  /* 去掉float: left，改成inline-block */
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* 其余样式保持不变 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

补充说明 #

• 两种方案都需要移除.topnav a的float: left属性，这是关键；
• 如果你的HTML结构里确实有<ul>包裹链接，那需要调整.topnav ul的样式：比如给ul设置display: inline-block; margin: 0; padding: 0; list-style: none;，同时给.topnav加text-align: center，再把li设置为display: inline-block（而不是用float）。

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