如何将导航栏（navbar）中的所有图标居中对齐？

直接修改你的CSS代码，用Flexbox就能搞定图标居中，同时优化间距布局：

* {
  padding: 0;
  margin: 0;
}
nav {
  padding: 20px;
  background-color: #809906;
  list-style: none;
  border-bottom: 2px solid black;
  /* 添加以下flex属性实现居中 */
  display: flex;
  justify-content: center; /* 水平居中所有图标 */
  align-items: center; /* 让图标在导航栏内垂直居中 */
  gap: 2rem; /* 控制图标之间的间距，可根据需求调整数值 */
}
a {
  color: black;
  /* 删掉原来的padding-right，用gap统一管理间距更灵活 */
}
a:hover {
  color: hotpink;
}

对应的HTML删掉内联的padding-left，保持代码简洁：

<script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>

<nav>
  <a href="#"><i class="fa-solid fa-bars"></i></a>
  <a href="#"><i class="fa-solid fa-house"></i></a>
  <a href="#"><i class="fa-solid fa-user"></i></a>
  <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
  <a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</nav>

核心调整说明 #

• display: flex：将nav转换为flex容器，内部的a标签会自动成为flex子元素
• justify-content: center：让所有图标在水平方向上居中排列
• gap：替代固定的padding值，让图标间距更均匀，适配不同屏幕尺寸
• 移除内联样式和固定padding，避免干扰flex的自动布局逻辑

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