关键用display: flex+align-items: center设于共同父容器，使图片与文字天然等高并垂直居中；inline-block+vertical-align仅适用于轻量或需兼容老浏览器场景，但易受line-height、font-size等影响。
图片和文字在同一行垂直居中，关键不是“调图片”，而是统一它们的对齐基准。默认情况下，<img>是行内元素，按基线（baseline）对齐，文字底部会悬空在图片下方——这不是 bug，是 CSS 的默认行为。要真正居中，得用可控的布局方式。
用 flex 布局最稳妥
这是现代项目首选，逻辑清晰、兼容性好（IE10+）、不依赖字体或行高。
- 给图片和文字的**共同父容器**设
display: flex和align-items: center - 两者自动变成弹性子项，天然等高，垂直中心自然对齐
- 加
gap或margin控制间距，比如gap: 0.75rem - 不用管图片是否加载失败、有没有宽高，也不用设
vertical-align
示例：
操作说明
用 inline-block + vertical-align
适合轻量场景或需兼容老浏览器（如 IE8+），但细节多、易踩坑。
- 把图片和文字都设为
display: inline-block - 必须加
vertical-align: middle（只写在图片上也行，但建议统一设） - 父容器避免
font-size: 0（除非你主动清除空白符），否则图片可能塌陷 - 注意行高影响：如果文字
line-height过大，仍可能撑开整体高度
示例：
标题文字
别踩这些坑
很多“没效果”其实是因为配置冲突或理解偏差：
-
text-align: center只控制水平居中，且只对父容器生效；它不能解决垂直错位 -
vertical-align对块级元素（如display: block的图片）完全无效 - 浮动（
float）会让元素脱离文档流，破坏行内对齐逻辑，已不推荐用于图文并排 - 父容器用了
display: flex或display: grid，再套text-align或vertical-align就会被忽略
响应式与容错小提醒
真实项目中还要考虑边界情况：
- 图片加载失败时，建议始终设置
width和height属性，防止布局跳动 - 文字过长可能换行，flex 容器默认
flex-wrap: nowrap，若需强制单行可加white-space: nowrap - 移动端小屏下，可配合
min-width: 0防止文字溢出，或用overflow: hidden; text-overflow: ellipsis
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
