隐藏再显示按钮后Text-align: center失效问题求助

你的问题出在强制将按钮的display设为block上：按钮默认是inline-block类型，父元素的text-align:center能让这种行内块元素居中；但改成block后，按钮变成了占满整行的块级元素，text-align:center对块级元素本身不再生效（只会影响它内部的文本），所以才会出现居左的情况。

给你两个可行的解决方案：

方案1：恢复按钮默认的display类型 #

修改你的隐藏/显示函数，取消强制设置display:block，改为恢复元素的默认样式（或者明确设为inline-block）：

function objectHide(object, hide) {
  const elem = document.getElementById(object);
  if (hide === 'hide') {
    elem.style.display = "none";
  } else if (hide === 'unhide') {
    // 清空display样式，让元素回到默认的inline-block
    elem.style.display = "";
    // 也可以直接写：elem.style.display = "inline-block";
  }
}

这样按钮显示后还是原来的行内块类型，父元素的text-align:center就能继续生效，保持居中状态。

方案2：给块级按钮设置自动外边距 #

如果你必须用display:block，那就给按钮添加固定宽度+左右自动外边距，让块级元素在父容器中居中：

方式一：CSS预设置 #

在样式表中给按钮添加规则：

#你的按钮ID {
  width: 180px; /* 根据按钮内容设置合适宽度 */
  margin: 0 auto;
}

这样显示按钮时，即使是block类型，也能自动居中。

方式二：JS动态设置 #

修改函数，显示时同时设置外边距：

function objectHide(object, hide) {
  const elem = document.getElementById(object);
  if (hide === 'hide') {
    elem.style.display = "none";
  } else if (hide === 'unhide') {
    elem.style.display = "block";
    elem.style.width = "180px";
    elem.style.margin = "0 auto";
  }
}

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