TicTacToe项目按钮下移问题求助：点击放置X/O后按钮错位

问题根源在按钮的CSS设置上：

• 用display: inline的元素默认按基线对齐，当按钮内插入大字体的X/O后，基线位置改变，直接导致按钮错位下移。
• line-height: 0.85px数值过小，文字无法正常垂直居中，也会间接干扰布局对齐。

修复方案 #

修改按钮的CSS样式即可解决：

button {
  width: 30%;
  height: 200px;
  text-align: center;
  line-height: 200px; /* 与高度一致，实现文字垂直居中 */
  cursor: pointer;
  display: inline-block; /* 替代inline，支持宽高且保持同行排列 */
  margin: 0;
  font-size: 14rem;
  vertical-align: top; /* 强制顶部对齐，避免基线变化导致错位 */
  box-sizing: border-box; /* 确保边框不额外占用宽度，维持30%的布局占比 */
  border: 1px solid #ddd; /* 可选，方便直观查看网格布局 */
}

关键调整说明 #

• display: inline-block：既保留同行排列的特性，又能精确控制按钮宽高，是布局网格按钮的最优选择。
• vertical-align: top：让所有按钮以顶部为基准对齐，不管内部内容的基线如何变化，都能维持整齐的3x3网格。
• line-height: 200px：让X/O文字在按钮内垂直居中，避免文字偏移带来的视觉混乱。

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