CSS 在单元格中的表格（一个

内部的

<

table>）上的文本对齐

在本文中，我们将介绍如何使用 CSS 对单元格中的表格进行文本对齐。

阅读更多：CSS 教程

什么是表格和单元格

在 CSS 中，表格由

<

table> 元素表示，而表格中的每个单元格则由

<a href="https://sotoolbox.com/tag/css"
target="_blank" rel="nofollow">HTML 元素。

以下是一个简单的表格的例子：

<table>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

这个例子中，表格由两行两列（2×2）的单元格组成。

文本对齐的属性

CSS 提供了多个属性来控制文本在表格单元格中的对齐方式。这些属性包括：text-align、vertical-align 和 display。

text-align 属性

text-align 属性用于设置文本在水平方向上的对齐方式。

以下是text-align 属性的几种常用值：

• left：将文本左对齐；
• right：将文本右对齐；
• center：将文本居中对齐；
• justify：将文本两端对齐；
• inherit：继承父元素的对齐方式。

示例

假设我们有一个表格如下所示：

<table>
  <tr>
    <td>左对齐文本</td>
    <td>居中对齐文本</td>
    <td>右对齐文本</td>
  </tr>
</table>

要将表格中的文本左对齐，可以使用以下 CSS 代码：

td {
  text-align: left;
}

要将表格中的文本居中对齐，可以使用以下 CSS 代码：

td {
  text-align: center;
}

要将表格中的文本右对齐，可以使用以下 CSS 代码：

td {
  text-align: right;
}

vertical-align 属性

vertical-align 属性用于设置文本在垂直方向上的对齐方式。

以下是 vertical-align 属性的几种常用值：

• top：将文本顶部对齐；
• middle：将文本垂直居中对齐；
• bottom：将文本底部对齐；
• baseline：将文本与基线对齐；
• inherit：继承父元素的垂直对齐方式。

示例

假设我们有一个表格如下所示：

<table>
  <tr>
    <td>顶部对齐文本</td>
    <td>垂直居中对齐文本</td>
    <td>底部对齐文本</td>
  </tr>
</table>

要将表格中的文本顶部对齐，可以使用以下 CSS 代码：

td {
  vertical-align: top;
}

要将表格中的文本垂直居中对齐，可以使用以下 CSS 代码：

td {
  vertical-align: middle;
}

要将表格中的文本底部对齐，可以使用以下 CSS 代码：

td {
  vertical-align: bottom;
}

display 属性

在默认情况下，表格单元格的宽度会根据内容自动调整。如果希望将表格单元格的宽度设置为固定值，可以使用 display 属性。

以下是 display 属性的常用值：

• block：将元素显示为块级元素；
• inline：将元素显示为行内元素；
• inline-block：将元素显示为行内块级元素。

示例

假设我们有一个表格如下所示：

<table>
  <tr>
    <td>块级元素</td>
    <td>行内元素</td>
    <td>行内块级元素</td>
  </tr>
</table>

要将表格中的单元格宽度设置为固定值，并将元素显示为块级元素，可以使用以下 CSS 代码：

td {
  display: block;
  width: 200px;
}

要将表格中的单元格宽度设置为固定值，并将元素显示为行内元素，可以使用以下 CSS 代码：

td {
  display: inline;
  width: 200px;
}

要将表格中的单元格宽度设置为固定值，并将元素显示为行内块级元素，可以使用以下 CSS 代码：

td {
  display: inline-block;
  width: 200px;
}

总结

通过使用 text-align、vertical-align 和 display 属性，我们可以轻松地控制表格单元格中文本的对齐方式。

在本文中，我们介绍了这些属性的用法，并提供了一些示例来演示如何使用这些属性来控制单元格中的表格文本的对齐方式。这些属性对于创建美观的表格布局非常有用。