HTML DOM对单个单元格的内容垂直对齐

HTML DOM 单元格垂直对齐

介绍

HTML DOM 提供了多种方法来控制表格单元格内容的垂直对齐方式，主要通过 CSS 属性实现。

主要标签

• <td> - 表格数据单元格

• <th> - 表格标题单元格

• <tr> - 表格行

• <table> - 表格容器

垂直对齐属性

vertical-align 是控制单元格内容垂直对齐的主要 CSS 属性，常用值：

• baseline (默认)

• top

• middle

• bottom

• text-top

• text-bottom

用法

可以通过以下方式应用垂直对齐：

1. 内联样式：

<td style="vertical-align: middle;">内容</td>

2. 内部样式表：

<style>
    td.vertical-middle {
        vertical-align: middle;
    }
</style>

3. 外部 CSS 文件：

td.vertical-top {
    vertical-align: top;
}

实例

<table border="1" style="height: 200px;">
    <tr>
        <td style="vertical-align: top;">顶部对齐</td>
        <td style="vertical-align: middle;">居中对齐</td>
        <td style="vertical-align: bottom;">底部对齐</td>
    </tr>
</table>

CSS 扩展

除了基本的垂直对齐，还可以结合其他 CSS 属性增强效果：

1. 使用 line-height 控制单行文本垂直居中：

td.single-line {
    height: 50px;
    line-height: 50px; /* 等于单元格高度 */
}

2. 使用 Flexbox 实现复杂垂直对齐：

td.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100px;
}

3. 使用 Grid 布局：

td.grid-container {
    display: grid;
    place-items: center; /* 水平和垂直居中 */
    height: 100px;
}

4. 结合 padding 控制内容位置：

td.padded {
    padding-top: 20px;
    padding-bottom: 20px;
}