HTML表格单元格垂直对齐时输入框顶部对齐为何会导致文本居中失效

在HTML表格开发场景中，经常需要在同一个单元格内同时放置说明文本和可编辑的输入框，很多开发者会给单元格设置垂直居中样式，却发现文本始终无法居中，反而和顶部的输入框对齐，这就是输入框默认垂直对齐属性导致的典型问题。

问题复现示例

我们先看一个会触发该问题的常见代码结构，代码如下：

<table border="1" width="300">
  <tr>
    <td style="vertical-align: middle; height: 60px;">
      用户名：
      <input type="text" name="username">
    </td>
  </tr>
</table>

按照预期，用户名文本和输入框都应该在单元格垂直居中位置，但实际渲染时，文本会和输入框的顶部对齐，垂直居中样式没有生效。

问题产生原因分析

1. 表格单元格垂直对齐的默认规则

HTML表格的<td>元素默认vertical-align属性值为middle，这个属性控制的是单元格内所有行内元素的整体基线对齐方式，而不是单个元素的位置。

2. 输入框的默认垂直对齐属性

表单中的<input>元素属于替换元素，它的默认vertical-align属性值为baseline，也就是和父元素的基线对齐。当单元格内同时存在文本和输入框时，输入框的基线会作为整个单元格行内元素的对齐基准，文本会和输入框的基线对齐，而输入框的基线通常在其内容区域的底部，这就导致文本看起来和输入框顶部对齐，整体垂直居中失效。

解决方案

方案一：修改输入框的垂直对齐方式

将输入框的vertical-align属性设置为middle，让输入框和文本的基线对齐，这样单元格的vertical-align:middle就会生效，代码如下：

<table border="1" width="300">
  <tr>
    <td style="vertical-align: middle; height: 60px;">
      用户名：
      <input type="text" name="username" style="vertical-align: middle;">
    </td>
  </tr>
</table>

方案二：统一设置单元格内行内元素的对齐方式

直接给单元格内的所有行内元素设置垂直居中对齐，避免单个元素的默认属性影响整体布局，代码如下：

<table border="1" width="300">
  <tr>
    <td style="vertical-align: middle; height: 60px;">
      <span style="vertical-align: middle;">用户名：</span>
      <input type="text" name="username" style="vertical-align: middle;">
    </td>
  </tr>
</table>

方案三：使用Flex布局替代默认单元格对齐

如果不需要兼容过旧的浏览器，可以给单元格设置Flex布局，直接控制内部元素的对齐方式，代码如下：

<table border="1" width="300">
  <tr>
    <td style="display: flex; align-items: center; height: 60px;">
      用户名：
      <input type="text" name="username">
    </td>
  </tr>
</table>

注意事项

• 修改<input>的vertical-align属性不会影响输入框本身的内容对齐，只会改变它在行内元素中的对齐位置
• 如果单元格内还有图片等其他行内元素，也需要统一检查它们的vertical-align属性，避免再次出现对齐异常
• 使用Flex布局时，表格单元格的默认display属性会被覆盖，如果需要保留表格的固有特性，建议优先使用方案一或方案二

HTML_tablevertical_aligninput_elementcss_layout修改时间：2026-06-17 18:24:34