如何在 HTML 表格中水平和垂直居中文本？

水平和垂直对齐 HTML 表格中的文本

在 HTML 表格中，将每个单元格内的文本水平和垂直居中，可以增强数据的呈现和可读性。以下是实现此目的的详细指南：

水平对齐

要使文本水平居中，请使用 text-align CSS 属性。添加文本对齐：居中；到

的 style 属性元素。这会将文本对齐到每个单元格的中心。

垂直对齐

对于垂直对齐，请应用 Vertical-align CSS 属性。设置垂直对齐：中间；以确保文本在单元格内垂直居中。此属性可能需要根据单元格的高度进行调整。

内联样式示例

您可以在表格中使用内联样式来应用这些对齐方式：

<code class="html"><table border="1">
  <tr>
    <td style="text-align: center; vertical-align: middle;">Text</td>
    <td style="text-align: center; vertical-align: middle;">Text</td>
  </tr>
</table></code>

CSS 示例类

或者，您可以创建一个 CSS 类来应用对齐方式：

<code class="css">.center-text {
  text-align: center;
  vertical-align: middle;
}</code>

并在表中使用它：

<code class="html"><table border="1">
  <tr>
    <td class="center-text">Text</td>
    <td class="center-text">Text</td>
  </tr>
</table></code>

记住，单元格的指定高度和宽度可能会影响垂直对齐。根据需要调整值以获得所需的结果。

以上是如何在 HTML 表格中水平和垂直居中文本？的详细内容。更多信息请关注PHP中文网其他相关文章！