移动端页面导航栏图片元素无法居中问题咨询

问题原因 #

• ID重复使用：id属性在单页面内必须唯一，你重复给3个图片设置id="NavigationItem"会导致样式匹配异常，部分移动端浏览器会优先识别第一个ID的样式，后续元素样式不生效
• 单边边距导致整体偏移：你给所有导航图片加了margin-left: 1rem，第一个图片左侧也会多出1rem的空白，整体导航栏会向右偏移，小屏设备上偏移效果更明显
• 容器缺少居中适配逻辑：仅靠废弃的<center>标签做居中，适配性差，导航容器没有响应式布局配置，小屏宽度不足换行后对齐逻辑混乱

修复方案 #

1. 先修改HTML代码，把重复的id改为class，移除冗余的<center>标签：

<div id="Navigation">
  <a href="#YourForum"><img class="NavigationItem" src="assets/img/forums.png" /></a>
  <a href="#YourStore"><img class="NavigationItem" src="assets/img/store.png" /></a>
  <a href="#YourVote"><img class="NavigationItem" src="assets/img/vote.png" /></a>
</div>

2. 调整CSS代码，用弹性布局实现全设备居中适配：

#Navigation {
  margin: 6rem auto;
  display: flex;
  /* 水平居中所有导航元素 */
  justify-content: center;
  align-items: center;
  /* 小屏宽度不够时自动换行，换行后依然保持居中 */
  flex-wrap: wrap;
  /* 控制导航元素之间的间距，不会给首尾元素添加额外边距 */
  gap: 1rem;
}
.NavigationItem {
  transition: .5s;
}
.NavigationItem:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

兼容旧版浏览器的替代方案 #

如果你的项目需要兼容不支持gap属性的旧浏览器，可以把CSS中gap:1rem的配置替换为：

.NavigationItem {
  transition: .5s;
  margin-left: 1rem;
}
/* 清除第一个导航元素的左侧边距 */
.NavigationItem:first-child {
  margin-left: 0;
}

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