css表格文字居中

CSS表格文字居中是一种常见的网页布局技巧，它可以使表格内的文字在单元格内水平居中显示，这种布局方式不仅使表格看起来更加美观，而且有助于提高内容的可读性，本文将详细介绍如何使用CSS实现表格文字居中，并提供一些实际应用示例。

我们需要了解CSS中的几个关键属性，这些属性将帮助我们实现表格文字居中，这些属性包括：text-align、vertical-align 和 display。

1、text-align 属性

text-align 属性用于设置文本的水平对齐方式，在表格中，我们可以将其应用于表格单元格（td）或表格标题（th）元素，要实现文字居中，我们需要将 text-align 属性设置为 "center"。

CSS

td, th {
  text-align: center;
}

2、vertical-align 属性

vertical-align 属性用于设置行内元素或表格单元格内容的垂直对齐方式，在表格中，我们通常将其应用于表格单元格（td）或表格标题（th）元素，要实现文字垂直居中，我们需要将 vertical-align 属性设置为 "middle"。

CSS

td, th {
  vertical-align: middle;
}

css表格文字居中

3、display 属性

display 属性用于设置元素的显示类型，在表格文字居中的场景中，我们通常将其与 table-cell 值一起使用，这样可以确保表格单元格的内容在垂直方向上居中显示。

CSS

td, th {
  display: table-cell;
}

结合以上三个属性，我们可以实现表格文字的完全居中，下面是一个简单的示例：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格文字居中示例</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      padding: 8px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </table>
</body>
</html>