样式一致但返回按钮未居中的前端问题求助

罪魁祸首是你JS代码里的这行代码：

document.getElementById("backToMode").style.display = "block";

具体原因：

• 所有按钮的.style1样式设置了display: inline-block，父容器.buttons通过text-align: center让这些行内块元素居中，这本来是正常生效的。
• 但你在changeMode函数里把Back按钮强行改成了display: block，块级元素不继承父容器的text-align: center效果，默认会在父容器中靠左对齐，所以就出现了前两个按钮居中、唯独Back按钮靠左的情况。

直接删掉changeMode函数里那行设置Back按钮display属性的代码即可。

因为Back按钮本身就在turnButtons容器内，你已经将容器设为display: block显示，容器内的按钮自然会跟着显示，完全不需要单独操作Back按钮的display属性。

如果担心Back按钮初始状态会意外显示，可以给它加上初始隐藏的样式：

<button class="style1" id="backToMode" onclick="goBack()" style="display:none;">Back</button>

修改后的changeMode函数如下：

function changeMode(mode) {
  if (mode === 'computer') {
    // do something
  }
  if (mode === 'player') {
    // do something
  }

  document.getElementById("modeButtons").style.display = "none";
  document.getElementById("turnButtons").style.display = "block";
  // 移除下面这行代码
  // document.getElementById("backToMode").style.display = "block";
}

这样所有按钮都会保持inline-block状态，受父容器text-align: center的影响实现居中显示。

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