表格中完美居中文字，一看就会的CSS方案！

2022-11-01 08:07:01

在表格和网页中轻松掌握文字居中技巧

在如今互联网蓬勃发展的时代，表格和网页无处不在，呈现出令人赏心悦目的效果至关重要。居中对齐不仅提升了美观性，更增强了用户体验。本文将深入探讨表格和网页中文字的垂直居中和水平居中技巧。

表格单元格（TD）的垂直居中

实现单元格文字垂直居中的最简便方法是使用 CSS 属性：vertical-align: middle。

table {
  border-collapse: collapse;
}

td {
  vertical-align: middle;
}

表格单元格（TD）的水平居中

对于单元格文字的水平居中，同样可以使用 CSS 属性：text-align: center。

table {
  border-collapse: collapse;
}

td {
  text-align: center;
}

表格单元格（TD）的垂直和水平居中

若要同时实现垂直和水平居中，只需同时应用这两个属性：

table {
  border-collapse: collapse;
}

td {
  vertical-align: middle;
  text-align: center;
}

使用注意事项

vertical-align 属性仅适用于表格单元格中的文本。
text-align 属性适用于所有元素，但对于单元格文本，它只能实现水平居中，无法实现垂直居中。
若同时使用这两个属性，vertical-align 的优先级高于 text-align。

代码示例：不同居中方式

下面展示了不同居中方式的代码示例：

<table border="1">
  <tr>
    <th>垂直居中</th>
    <th>水平居中</th>
    <th>垂直和水平居中</th>
  </tr>
  <tr>
    <td><p style="vertical-align: middle;">示例</p></td>
    <td><p style="text-align: center;">示例</p></td>
    <td><p style="vertical-align: middle; text-align: center;">示例</p></td>
  </tr>
</table>