ASP.NET(C#)中虚拟键盘有值/无值输入按钮未对齐问题排查

• 浏览器默认按钮样式会根据内部文本调整垂直布局：有文本的按钮会基于文本基线对齐，空文本按钮因没有基线参考，垂直位置会偏移
• 空按钮的默认内边距、行高会塌陷，导致按钮高度或内部空间和有文本的不一致
• 不同浏览器的默认用户代理（UA）样式差异，进一步放大了对齐偏差

1. 统一按钮的固定尺寸与内边距 #

给.keyboard类设置固定宽高、统一内边距，确保所有按钮的外部尺寸一致：

.keyboard {
  width: 50px;
  height: 50px;
  padding: 0; /* 清除默认内边距差异 */
  box-sizing: border-box; /* 确保尺寸包含边框内边距 */
}

2. 强制文本垂直居中对齐 #

通过行高和文本对齐，让按钮内部不管有没有文本，布局基准一致：

.keyboard {
  /* 续上面的样式 */
  line-height: 50px; /* 和高度一致，实现文本垂直居中 */
  text-align: center;
  vertical-align: middle; /* 统一按钮间的垂直对齐方式 */
}

3. 使用Flex布局容器（更简便） #

如果按钮是横向排列，用Flex容器可以一键实现所有按钮对齐：

.keyboard-container {
  display: flex;
  align-items: center; /* 垂直居中所有按钮 */
  gap: 6px; /* 按钮间的间距，可调整 */
}

对应的HTML结构调整为：

<div class="keyboard-container">
  <input id="kb_~" type="button" value="1" class="keyboard" />
  <input id="kb_ㄅ" type="button" value="" class="keyboard" />
  <input id="kb_ㄉ" type="button" value="ㄉ" class="keyboard" />
  <input id="kb_3sound" type="button" value="ˇ" class="keyboard"  />
  <input id="kb_4sound" type="button" value="ˋ" class="keyboard" />
</div>

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