vertical-align 对 inline-block 有效但对 flex 容器无效，因后者由 align-items 控制垂直对齐；text-align 仅作用于文本内容，justify-content 才控制 flex item 主轴分布；inline-flex 宽度不足时 justify-content 失效，需显式设宽或改用 flex。
vertical-align 对 inline-block 有效，对 flex 容器无效
这是最常被误用的一点：很多人给 display: inline-block 元素设 vertical-align: middle 能对齐，就以为在 display: flex 容器里也该用它——其实完全不生效。vertical-align 只作用于行内级元素（inline、inline-block、inline-table 等），而 flex 容器里的子项是 flex item，它们的垂直对齐由容器的 align-items 控制。
-
inline-block元素默认按baseline对齐，换行或空格会引发视觉错位，加vertical-align: top/middle/bottom是最直接的修复手段 -
flex容器中，align-items: center才是真正的“垂直居中”，且不受字体基线干扰，更稳定 - 若在
inline-flex容器里混用vertical-align，它只影响该容器自身在文本流中的位置（比如和旁边文字对齐），不影响其内部子项
justify-content vs text-align：主轴对齐逻辑完全不同
text-align 是文本对齐，只对行内内容起作用；justify-content 是 Flex 布局的主轴对齐，控制的是所有 flex item 在容器主轴上的分布方式。两者不能互换，也不能叠加生效。
- 用
inline-block做导航栏时，靠text-align: center让整行按钮居中——这是把父容器当“文本行”处理 - 用
display: flex时，justify-content: center是让每个按钮在主轴上重新计算位置，支持space-between、space-around等动态分布 - 如果误在 flex 容器上同时写
text-align: c和
enter
justify-content: flex-start，后者会完全覆盖前者的效果
对齐失效的典型场景：inline-flex 容器宽度不足
很多人用 display: inline-flex 想实现“按钮组嵌入段落”，却遇到 justify-content: center 看似没反应——根本原因是 inline-flex 容器默认宽度由内容决定，不是父容器宽度。它没有足够空间去“分配”子项，center 就退化为左对齐。
- 现象：
.btn-group { display: inline-flex; justify-content: center; }，但三个按钮紧贴左边缘 - 原因：容器宽度 ≈ 三个按钮总宽 + gap，没有富余空间供
justify-content发挥 - 解法一：改用
display: flex并设width: 100%或max-width - 解法二：保留
inline-flex，但显式设width: fit-content或min-width: 300px，给主轴留出对齐余量
表单控件对齐时，inline-block 的 vertical-align 更易失控
在混合 input、select、textarea、图标等元素时，inline-block 的 vertical-align 会因各元素默认基线不同而频繁偏移——比如 textarea 基线在底部，input 在中间，vertical-align: middle 实际效果是“中线对齐”，视觉上仍不齐。
- Flex 方案只需统一设
align-items: center，所有子项以容器中心为基准对齐，无视自身基线 - 特别注意：
textarea是替换元素，在 flex 中需额外加min-height和resize: vertical保持可用性 - IE11 下
inline-block对齐相对稳定，但flex的align-items支持良好，仅flex: 1在表单元素上有收缩异常，建议改用flex: 1 1 0
inline-block 把对齐权交给每个元素自己（vertical-align），flex 把对齐权收归容器（align-items / justify-content）。后者更可控，但也意味着你必须理解主轴/交叉轴，而不是凭直觉调 margin 或 vertical-align。
