JavaScript修改按钮InnerText后数字无法居中的求助

嘿，我明白你遇到的困扰了——把按钮文本换成5位数字（比如88,888）后，怎么都没法让它居中，用textAlign设置也不管用对吧？我来帮你拆解问题，一步步解决它。

问题根源 #

1. 按钮宽度不够：你给按钮设置的固定宽度是30px，但5位数字加上9px的字体，实际内容宽度已经超过了按钮的宽度。这时候text-align:center根本起不到视觉上的居中效果，因为内容已经溢出按钮边界了。
2. JS强制设置左对齐：在你的qicheckValue函数里，不管什么场景都把buttonsubmit.style.textAlign = "left"，这直接覆盖了任何可能的居中样式，就算按钮宽度够，文本也会被强制靠左。

解决方案 #

我们从CSS和JS两方面调整：

1. 调整按钮CSS，预留足够空间并默认居中

修改.AllButtons button的样式，增加宽度、设置盒模型确保尺寸计算正确，同时默认文本居中：

.AllButtons button {
  height: 24px;
  /* 把宽度从30px改成50px，足够容纳5位数字 */
  width: 50px;
  font-family: Arial;
  font-weight: bold;
  font-size: 9px;
  box-shadow: 0 0.25px #999;
  /* 确保padding不会额外增加总宽度 */
  box-sizing: border-box;
  /* 默认文本居中 */
  text-align: center;
  /* 可选：添加一点内边距，让文本不贴边 */
  padding: 0 2px;
}

2. 修改JS代码，移除强制左对齐的设置

在qicheckValue函数里，把所有buttonsubmit.style.textAlign = "left"的代码删掉，或者统一改成"center"：

function qicheckValue(){
  var inputvalue = document.getElementById('modalvalue');
  var buttonsubmit = document.getElementById(QiTV.getAttribute('startbtn') );
  var value = parseInt(inputvalue.value);
  var targetValue = parseInt(QiTV.value);
  if (value < targetValue){
    buttonsubmit.style.background = 'rgb(255, 0, 0)';
    // 删掉左对齐设置，或改为"center"
    // buttonsubmit.style.textAlign = "left";
    buttonsubmit.innerText = value ;
  } else if (value >= targetValue){
    buttonsubmit.style.background = 'rgb(60, 179, 113)';
    // 删掉左对齐设置，或改为"center"
    // buttonsubmit.style.textAlign = "left";
    buttonsubmit.innerText = value ;
  } else{
    buttonsubmit.style.background = '';
    // 删掉左对齐设置，或改为"center"
    // buttonsubmit.style.textAlign = "left";
    buttonsubmit.innerText = ''
  }
  modal.style.display = "none" ;
  return false;
}

3. 可选：让按钮宽度自适应内容（如果布局允许）

如果你不想固定宽度，也可以把按钮的width改成auto，让它根据文本长度自动调整，同时设置最小宽度保证小数字时的布局一致性：

.AllButtons button {
  /* 替换固定宽度为自适应 */
  width: auto;
  /* 最小宽度保证布局稳定 */
  min-width: 30px;
  /* 其他样式不变 */
}

这样调整后，5位数字就能在按钮里完美居中了，你可以根据自己的布局需求选择固定宽度或自适应宽度的方案。

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