HTML表格对齐属性align与valign的区别-html教程-PHP中文网

align控制水平对齐（left/center/right），valign控制垂直对齐（top/middle/bottom/baseline）；二者在HTML5中均已废弃，应分别用text-align和vertical-align替代，确保语义与样式分离。

html表格对齐属性align与valign的区别

align和valign分别控制什么方向的对齐

align 控制水平方向（左/中/右），valign 控制垂直方向（上/中/下）。这不是“可互换的两个选项”，而是作用轴向完全不同的两个属性：一个管左右，一个管上下。

常见误用是把 valign="center" 写成 valign="middle" —— 实际上只有 top、middle、bottom、baseline 是有效值，center 会被浏览器忽略或当成 middle 处理，但不保证一致。

align="left" 对应 CSS 的 text-align: left
valign="top" 对应 CSS 的 vertical-align: top

align 可用于

、、 和  没有显式高度，或父 、 ，但语义已混乱；valign 主要用于 
、 
为什么直接写 align="center" 还能生效，但不该用
因为浏览器仍做向后兼容解析，尤其在没有明确  或处于怪异模式时。但 HTML5 标准已将 align 和 valign 标记为废弃（obsolete），不是“不支持”，而是“不合规”——W3C 验证器会报 warning，团队代码审查常会拒收。
更实际的问题是：如果同时写了 align="right" 和 style="text-align: left"，CSS 会覆盖 HTML 属性，但开发者未必意识到冲突来源，调试时容易绕弯。

废弃 ≠ 失效，但意味着它不再属于现代语义化 HTML 的一部分

align="justify" 在 IE 中被当 center 处理，行为不可靠

align="char" 几乎无浏览器支持，实际无效

vertical-align 的行为为什么经常“看起来没起作用”
vertical-align 不是对整个表格居中，而是对单元格内容在其所在行内“框”的对齐。它只对 display: table-cell（即 、 ）或行内元素生效；用在  上默认无效，除非显式设 display: table-cell。典型表现：设了 vertical-align: middle，但文字还是贴着顶部——大概率是因为该 
 行高塌陷，导致“中间”没参照基准。确保  或 
 有足够高度（例如 height: 40px 或 line-height: 40px）
避免在  里混用块级元素（如 

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										、）和纯文本，vertical-align 对整块内容生效，不是逐行对齐

baseline 值依赖字体度量，不同字号文本混排时才体现优势，日常多数场景用 middle 更可控
推荐的替代写法与类名组织方式
用 CSS 类统一管理对齐，比内联属性更易维护、复用、测试。不要写 ，改用语义化类名。例如：
td.numeric { text-align: right; }
td.status { vertical-align: middle; }
th.header { text-align: center; vertical-align: bottom; }
这样既避免 HTML 被样式污染，也方便后续全局调整（比如所有数字列需要加千分位，只需改一处 CSS）。
真正麻烦的从来不是“怎么让文字居中”，而是“为什么居中后内容被截断”“为什么两行文本只有一行对齐了”——这些问题几乎都源于对 vertical-align 作用域和父容器约束条件的理解偏差。