vertical-align: middle没反应是因为它只对inline或inline-block元素生效，作用于行内上下文基线而非父容器；常见错误是给display: block的img或混有块级元素的父容器设置该属性。
vertical-align: middle 为什么加了没反应
因为 vertical-align 只对 inline 或 inline-block 元素生效，而它作用的对象是“行内上下文中的基线”，不是父容器。常见翻车点：给 img 加了 vertical-align: middle，但父容器里混着 div、p 这类块级元素，或者图片被设了 display: block —— 此时它已脱离行内流，vertical-align 直接失效。
适用场景很窄：图标 + 按钮文字、导航栏小图 + 文字、纯行内结构（比如 <span><img></span><span>文字</span>）。
- 别写
vertical-align: baseline（默认值），那是错位源头 - 如果文字用了大
line-height或特殊字体，middle可能仍偏高，可试text-top或具体像素值如-2px - 确保图片没被意外设成
display: block或float，否则它就不再是行内元素
flex 布局图文并排居中总有一边不齐
根本原因是只写了 justify-content: center 或只写了 align-items: center，漏掉任意一个，就只能单向居中；更隐蔽的问题是父容器高度塌陷——align-items: center 在垂直方向需要明确参照，没有 height 或 min-height，它就“没地方可居中”，结果就是图片水平居中、文字贴顶。
示例中常见错误：<div class="card">
<img><span>文字</span>
</div>，但 .card 只设了 display: flex 和 justify-content: center，缺 align-items 和高度。
- 必须同时设置
justify-content: center（水平）和align-items: center（垂直） - 父容器需有明确高度，如
min-height: 200px或height: 100vh；用min-height比height更安全，防内容撑高后溢出 - 避免直接在
上启用display: flex，否则所有直系子元素都会变成 flex item，破坏原有文档流 - 图文若需响应式换向（比如手机端上下排列），加
flex-direction: column，而不是靠margin或float临时补救
text-align: center 居中失败的三个典型误用
text-align: center 不是“让某个元素居中”，而是“让父容器里的行内内容水平居中”。它对块级子元素（如 div）、浮动元素、绝对定位元素完全无效，且不处理垂直方向。
最常踩的坑：把 text-align: center 写在 img 标签上，或写在用了 display: flex 的父容器里——前者语法合法但无意义，后者被 flex 布局直接忽略。
- 必须写在父容器上，例如
<div style="text-align: center"> <img>文字</div> - 父容器不能是
display: flex或display: grid，否则该属性被覆盖 - 如果父容器里除了
img还有div，那个div不会居中，除非你给它加display: inline-block - 它不管垂直方向，想图文都居中？必须搭配其他方案，比如父容器再套一层 flex
gap 与 margin 在图文间距上的本质区别
用 gap 控制图文间距，比分别给 img 和文字加 margin-right / margin-left 更可靠，因为它只作用于 flex 或 grid 容器的直接子项之间，不会因顺序变化、动态插入或移除元素导致某一边漏掉间距。
但 gap 仅在 display: flex 或 display: grid 下有效，且不兼容 IE（IE 完全不支持）。如果项目还需支持旧版 IE，就得回归 margin + :first-child / :last-child 微调。
-
gap: 16px会在两个相邻 flex item 之间生成 16px 空隙，不管它们是img还是span - 不用考虑“谁该加右 margin、谁该加左 margin”，避免父子 margin 折叠或方向错乱
- 响应式场景下，
gap可配合@media直接改值，比批量改多个margin更干净 - 注意：
gap对 flex 容器内的嵌套子元素无效，只管直系子项
flex，一边又给子元素设 float 或 vertical-align，结果就是样式打架，浏览器按优先级随便选一个执行。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
