如何不使用margin或padding将img标签居中对齐

你的问题根源有两个：一是.logo的margin-left:10px直接把图片拉偏了，二是.nav容器没做内部居中处理。按照要求不使用margin或padding的话，这么改：

1. 移除.logo的margin样式 #

直接删掉.logo里的margin: 10px 0 0 10px，这个样式是图片不居中的直接原因：

.logo {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  /* 删掉原来的margin行 */
}

2. 给.nav容器添加居中布局 #

因为header已经设置了align-items: center，所以.nav本身是水平居中的，但它内部的元素（图片和导航）需要单独做居中。给.nav加flex布局来实现：

.nav {
  display: flex;
  flex-direction: column; /* 想让图片和导航横向排列就改成row */
  align-items: center;
  gap: 10px; /* 用gap控制元素间距，替代margin，符合要求 */
}

另外注意，默认ul有自带的内边距，会让导航菜单偏右，所以给.main-menu ul加个padding: 0来移除默认样式：

.main-menu ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  list-style: none;
  padding: 0;
}

完整修改后的CSS #

header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.main-menu ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  list-style: none;
  padding: 0;
}

这样改完，图片就能和其他内容一样居中了，全程没用到margin或padding来主动调整位置（padding:0是移除默认样式，不算用于居中的设置）。

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