valign 属性在现代 html 中已废弃,无法可靠实现图片垂直居中;根本原因是它基于行盒基线对齐,而 img 默认为 inline 元素,底部留有下行空间导致视觉下沉,且 display: block 时完全失效。

valign 属性在现代 HTML 中已废弃,直接用它无法可靠实现图片垂直居中——浏览器兼容性差,且在 <table> 的 <code><td> 或 <code><th> 上设置 <code>valign="middle" 仅对纯文本或行内内容“勉强有效”,遇到 <img>(尤其是未设高宽或含 margin/padding 的)极易失效。
为什么 valign 对图片经常不生效?
根本原因是:valign 作用于单元格内容的“基线对齐”,而 <img> 默认是 inline 元素,其底部会留出文字下行空间(descender space),导致视觉上“下沉”。即使设了 valign="middle",浏览器仍按 inline 布局规则计算,图片实际并未居中。
-
<img>在<td> 中默认和文字一样参与行盒(line box)布局,<code>valign调整的是整行盒子的对齐位置,不是图片自身 - 若图片设置了
display: block,它就脱离行盒,valign完全失效 - HTML5 不再支持
valign属性,部分浏览器(如 Chrome 90+)已忽略该属性 - 给
<td> 加 <code>vertical-align: middle(注意:这是 CSS 属性,不是 HTMLvalign)——它只对 inline/inline-block 子元素起作用 - 把
<img>设为display: inline-block或保持默认 inline,并配合vertical-align: middle - 更稳妥的做法:设
<img>为display: block,然后用 flex 实现居中(需确保<td> 是 flex 容器) <p>示例:</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件,便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><td style="vertical-align: middle;"> @@##@@ </td></pre> <p>或更健壮的写法:</p> <pre class="brush:php;toolbar:false;"><td style="display: flex; align-items: center; justify-content: center;"> @@##@@ </td></pre> <h3>遇到固定高度单元格时的处理技巧</h3> <p>如果 <code><td> 显式设了 <code>height: 40px,而图片高度不一致,vertical-align: middle可能因行高塌陷失效。此时必须显式控制行高或使用 flex。- 避免只设
height,改用min-height+line-height匹配高度(适用于单图无换行场景) - 优先用
display: flex,它不依赖行高,对图片尺寸变化鲁棒性强 - 若需兼容 IE10–11,可用
display: table-cell+vertical-align: middle组合(但需额外包裹一层)
真正要警惕的不是“怎么写
valign”,而是默认假设它还能用——现代项目里,所有靠valign实现的图片居中,几乎都藏着渲染不一致的隐患,尤其在缩放、高 DPI 屏幕或动态加载图片时更容易暴露。
- 避免只设
真正可靠的替代方案:CSS + 表格单元格
保留表格结构(比如用于数据展示),但用 CSS 控制图片对齐。关键不是改 <td>,而是控制 <code><img> 自身。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










