如何居中带有float: left属性的导航栏（Navbar）

想保留现有float: left属性同时让导航栏居中，给.navbar添加Flex布局属性即可，不会破坏原有下拉菜单的布局：

.navbar {
  overflow: hidden;
  background-color: none;
  text-align: center;
  /* 新增这两行 */
  display: flex;
  justify-content: center;
}

修改后的完整CSS代码 #

.navbar {
  overflow: hidden;
  background-color: none;
  text-align: center;
  display: flex;
  justify-content: center;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: grey;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition-duration: 0.3s;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: grey;
  padding: 0px 0px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  color: #FFF;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: none;
  margin-top: 45px;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {
  background-color: none;
  padding: 12px 25px;
  color: #FFF;
}

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

.navbar .focus {
  color: #FFF;
}

方案说明 #

• Flex布局的justify-content: center会让.navbar内的所有子元素（导航链接和下拉容器）整体水平居中，原有float: left属性在Flex容器中会被忽略，但导航项的横向排列逻辑不受影响。
• 下拉菜单使用position: absolute脱离了文档流，Flex布局对它的定位和显示逻辑完全没有干扰，hover触发下拉的功能保持正常。

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