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 class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>或<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 就永远差那么一丢丢。
立即学习“前端免费学习笔记（深入）”；
