HTML DOM单元格内容垂直对齐

参考资料

1. HTML DOM改变单元格横跨的列数(colspan属性)
2. HTML DOM 返回和设置一个iframe中的scrolling属性的值
3. HTML DOM一个单元格的innerHTML
4. HTML DOM指定表格的frame
5. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
6. HTML DOM 方法
7. HTML DOM将下拉列表变成多行列表
8. HTML DOM 返回文档中第一个图像的ID

HTML DOM单元格内容垂直对齐

1. 基本介绍

• 控制表格单元格内容在垂直方向上的对齐方式

• 适用于

  和	元素

2. 主要属性

• valign属性（HTML4）

• vertical-align样式属性（CSS）

3. HTML valign属性

• 取值：

• top

• middle

• bottom

• baseline

• 示例：

<td valign="top">内容</td>

4. CSS vertical-align属性

• 取值：

• baseline

• top

• middle

• bottom

• text-top

• text-bottom

• length

• %

• 示例：

td {
  vertical-align: middle;
}

5. 功能扩展

• 结合line-height属性控制垂直居中

• 使用padding调整内容位置

• 配合display:table-cell实现非表格元素垂直对齐

6. 完整示例

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

7. 注意事项

• valign在HTML5中已废弃，推荐使用CSS

• 不同浏览器对某些值的支持可能有差异

• 需要设置单元格高度才能看到明显效果