css列居中对齐表头

### CSS 表格表头列居中对齐

为了使 `CSS` 表格中的表头列内容居中对齐，可以利用特定的样式设置来达成这一目标。对于基于 `display: table` 的布局方式而言，在定义好基本结构之后，通过给定合适的文本对齐属性即可完成操作。

当创建一个类似于表格的无序列表时，可以通过如下方法让表头内的文字水平居中显示：

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%; /* 设置宽度 */
}

li.header { 
    display: table-caption; /* 使用此属性可更方便处理表头 */
    caption-side: top;      /* 将caption放置于顶部 */
    text-align: center;     /* 文本居中 */
}

如果希望每个单元格的内容都保持居中，则应针对具体的 `<li>` 或者其他代表数据行的标签应用相应的内联样式：

th, td, li.item {
    display: table-cell;
    background-color: #BD4932;
    text-align: center;        /* 单元格内容居中 */
    vertical-align: middle;    /* 垂直方向也居中 (可选)*/
}

需要注意的是，上述例子假设有一个特殊的类 `.header` 来区分表头和其他部分，并且有 `.item` 类用于普通的表格项[^1]。

此外，虽然这里讨论的是使用 `UL/LI` 构建模拟表格的情况，但在实际开发过程中推荐直接采用 HTML 提供的标准 `<table>`, `<thead>`, `<tbody>` 和 `<tr>/<td>` 等元素构建真正的表格结构并配合相应 CSS 进行美化[^2]。