vertical-align 对 float 元素无效，因其仅作用于 inline 和 table-cell 元素；推荐用 display: flex + align-items: center 实现图文垂直居中，并需设置 img { vertical-align: top } 或 display: block 消除底部间隙。
float 图片后文字不居中，vertical-align 为什么没用
因为 vertical-align 对 float 元素完全无效——它只作用于行内元素（inline）和表格单元格（table-cell），而浮动元素已脱离普通文档流，变成块级定位行为。你给浮动图片加 vertical-align: middle，浏览器直接忽略。
用 flex 替代 float 是最干净的解法
把图文容器设为 display: flex，天然支持垂直对齐，且无需清除浮动、无文档流干扰：
.media-container {
display: flex;
align-items: center; /* 垂直居中 */
gap: 12px; /* 图文间距，比 margin 更可控 */
}- 图片不用
float，保持默认display: block即可 - 文字用
<p></p>或<div> 都行，flex 会自动拉平基线<li>如果文字有多行，<code>align-items: center仍能保证整体居中，不像vertical-align只对单行有效 - 旧版 Android WebView（4.4 以下）不支持
gap，可退化为margin-left给文字 - 给图片加
margin-top: -Xpx（X ≈ 行高的一半减图片高度一半） - 或给文字容器加
padding-top/line-height拉动基线 - 更稳妥的是用伪元素 +
vertical-align: middle：在文字前插入空::before，设为inline-block+height: 100%+vertical-align: middle，再让图片也vertical-align: middle——但此时图片必须去掉float，否则又失效
非要保留 float？只能靠 hack 式微调
若因历史代码无法改结构，必须用 float，那就放弃“自动居中”，手动算偏移：
真正容易被忽略的点
很多人试了 flex 还是不对齐，问题常出在：img 默认是 display: inline，底部自带空白间隙（像文字的 descender 空隙），即使套了 flex 容器也会下移几像素。解决方法只有两个：img { vertical-align: top } 或 img { display: block }。这个细节不处理，align-items: center 就永远差那么一丢丢。
立即学习“前端免费学习笔记（深入）”；
