参考资料

1. HTML DOM单元格内容水平对齐
2. HTML DOM 返回文档中锚的数目
3. HTML DOM 根节点
4. HTML DOM 设置image的hspace和vspace属性
5. HTML DOM改变下拉列表中被选中的选项的文本
6. HTML DOM 返回和设置链接的hreflang属性实例
7. HTML DOM对单个单元格的内容水平对齐
8. HTML DOM 用指定的ID弹出一个元素的innerHTML实例

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