参考资料

1. HTML DOM 返回文档中第一个图像的ID
2. HTML DOM 返回一个表单target属性的值
3. HTML DOM shift键被按下了吗？
4. HTML DOM 改变一个包含在iframe中的文档的背景颜色
5. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
6. HTML DOM 节点列表长度
7. HTML DOM删除表格中的行
8. HTML DOM获得有下拉列表的表单的ID

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