HTML DOM单元格内容垂直对齐

参考资料

1. HTML DOM 返回一个button的type 实例
2. HTML DOM 返回页面上所有相对链接的基链接 实例
3. HTML DOM 返回当前的文件和链接的文档之间的关系
4. HTML DOM 导航节点关系
5. HTML DOM 哪个元素被按下了？
6. HTML DOM 返回一个button的name 实例
7. HTML DOM 返回一个表单acceptCharset属性的值
8. HTML DOM 返回文档的标题实例

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

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

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

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