参考资料

1. HTML DOM添加表格行中的单元格
2. HTML DOM 打开输出流，向流中输入文本实例
3. HTML DOM 导航节点关系
4. HTML DOM 方法
5. HTML DOM 返回文档中第一个图像的ID
6. HTML DOM 返回文档中锚的数目
7. HTML DOM 改变一个iframe的src
8. HTML DOM 返回和设置链接的charset属性实例

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;
}