valign 属性在 html5 中已废弃，应使用 css 的 vertical-align 替代，但仅对 td、th、img、span 等行内级或表格单元格元素有效；多行内容垂直居中推荐 flex 布局，调试时需检查 display 类型、line-height 和 computed styles。
valign 属性在现代 HTML 中已废弃，别再用
HTML5 标准里 valign 属性（比如 <td valign="middle">）已被完全移除，浏览器虽大多仍兼容，但会触发 HTML 验证警告，且在严格模式或 XHTML 环境下直接失效。它不是“还能凑合”，而是“不该再写”。
<h3>用 CSS 的 vertical-align 替代 valign，但注意作用对象</h3>
<p><code>vertical-align 是唯一正确替代方案，但它只对 <td>、<code><th>、<code><img>、<span></span> 等**行内级或表格单元格元素**生效，不能设在 <table> 或 <code><tr> 上——设了也没用。
<p>常见错误写法：<code><tr style="vertical-align: middle"> → 无效；正确写法是：<code><td style="vertical-align: middle"> 或统一写在 CSS 类里：
<pre class="brush:php;toolbar:false;">td.center-vert { vertical-align: middle; }</pre>
<p>可选值包括：<code>top、middle、bottom、baseline（默认），其中 middle 对齐的是单元格的**中线**，不是视觉正中心（尤其当单元格高度由内容撑开时）。
多行文本或复杂内容垂直居中需额外处理
如果 <td> 里有换行文本、按钮、图标组合，<code>vertical-align: middle 只能对齐行框基线，常显得偏上。这时得用更可靠的布局方式：
- 给
<td> 加 <code>display: flex; align-items: center;（推荐，兼容性到 Chrome 29+/Firefox 20+/Edge 12+） - 若需支持 IE10–11，改用
display: table-cell; vertical-align: middle;（注意：此时子元素不能再设flex，否则冲突） - 避免用
line-height模拟居中——仅适用于单行纯文本，且高度必须固定 - 临时加
outline: 1px solid red查看<td> 实际边界 <li>检查是否意外继承了父级或重置 CSS 的 <code>line-height（它会放大/压缩行高，干扰vertical-align） - 用浏览器开发者工具悬停查看 computed styles，确认
vertical-align是否被覆盖或计算为baseline
border-collapse 和 padding 会影响视觉对齐效果
表格边框合并状态会改变单元格实际可用空间：border-collapse: collapse 下，padding 是唯一控制内容离边距离的方式；而 separate 模式下，border-spacing 也会挤占空间。哪怕 vertical-align 设对了，padding 过小或 border-spacing 过大，都会让内容看起来“没居中”。
调试建议：
真正麻烦的从来不是怎么写居中，而是为什么写了却没效果——往往卡在 display 类型、父容器约束或隐式 line-height 上。动手前先看一眼 computed styles，比查文档更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
