参考资料

1. HTML DOM 返回文档中的链接数
2. HTML DOM 返回一个iframe中的frameborder属性的值
3. HTML DOM 返回一个iframe中的longdesc属性的值
4. HTML DOM document.write() 方法
5. HTML DOM 设置image的hspace和vspace属性
6. HTML DOM 返回一个区域的href属性的锚部分实例
7. HTML DOM 返回一个button的name 实例
8. HTML DOM 返回文档中第一个图像的ID

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。