html的表格中如何调整一行字的位置

在html表格里，我们经常会遇到某一行的文字位置不好看的情况，比如文字贴在单元格顶部，或者没有居中。要调整一行字的位置，本质就是控制这一行在垂直和水平方向上的对齐方式。

一、使用html属性调整

最简单的方式是直接在<tr>或<td>标签上使用valign和align属性。valign控制垂直位置，align控制水平位置。

<table border="1">
  <tr valign="middle" align="center">
    <td>这一行文字垂直居中且水平居中</td>
    <td>第二列内容</td>
  </tr>
  <tr valign="top" align="left">
    <td>这一行文字靠上且靠左</td>
    <td>第二列内容</td>
  </tr>
</table>

其中valign可用值有top、middle、bottom、baseline；align可用值有left、center、right、justify。

二、使用css方式调整

更推荐用css来控制，写法更清晰，也方便统一维护。可以在style里用vertical-align和text-align。

/* 让表格中所有行的内容垂直居中、水平居中 */
table tr {
  vertical-align: middle;
  text-align: center;
}

/* 只调整某一行 */
.special-row {
  vertical-align: top;
  text-align: left;
}

对应的html结构如下：

<table border="1">
  <tr class="special-row">
    <td>这行通过css类调整位置</td>
    <td>内容</td>
  </tr>
</table>

注意事项

• vertical-align作用在<td>或<th>上时才对单元格内容生效，直接写在某些块级元素上行为不同。
• 如果单元格里放的是块级元素，text-align依然可以影响其内部行内内容的水平位置。
• 用css比用html属性更易维护，也更符合现在的标准写法。

三、小结

调整html表格中一行字的位置并不复杂，记住垂直方向看vertical-align，水平方向看text-align。用css写在tr或td上就能精准控制，让表格看起来更整齐舒服。

html表格表格行对齐vertical_align修改时间：2026-07-28 08:06:19