vertical-align在Bootstrap中常失效，因其仅对inline、inline-block、table-cell有效，而Bootstrap的.row和.col-*默认为flex布局；flex下应使用align-items、justify-content或align-self替代。
vertical-align在Bootstrap中为什么经常失效
因为Bootstrap的 .row 和 .col-* 默认是 flex 布局，而 vertical-align 只对 display: inline、inline-block、table-cell 有效，对 flex 子项完全不起作用。你给 .col 加 vertical-align: middle，浏览器直接忽略。
哪些场景下 vertical-align 确实能用上
它只在以下真实存在行内上下文的地方起效：
- 同一行内的
<span></span>、<img alt="CSS如何解决Bootstrap行内元素对齐_应用vertical-align属性" >、<input>混排时（比如表单控件旁加图标） - 使用
display: inline-block的自定义按钮组或标签组 - Bootstrap 的
.input-group内部，当手动把.input-group-text设为display: inline-block时 - 表格单元格里（
td默认是table-cell）
示例：一个带图标的输入框
<div class="input-group"> <span class="input-group-text"><i class="bi bi-search"></i></span> <input type="text" class="form-control"> </div>
如果图标和输入框高度不齐，别急着改 vertical-align —— 先检查 .input-group-text 是否被 Bootstrap 设成了 display: flex（v5.3+ 默认如此），此时要调的是 align-items，不是 vertical-align。
立即学习“前端免费学习笔记（深入）”；
flex布局下替代 vertical-align 的正确姿势
绝大多数 Bootstrap 行列对齐问题，本质是 flex 对齐问题，该用的是 align-items、justify-content 或 align-self：
-
align-items: center→ 替代vertical-align: middle（用于.row或.d-flex容器） -
align-self: end→ 替代vertical-align: bottom（作用于单个.col） - 若需垂直居中内容而非子项，给子容器加
d-flex align-items-center，而不是依赖vertical-align - Bootstrap 5+ 提供
align-middle工具类，但它只对inline或table-cell元素生效，对.col无效
调试 vertical-align 的三个关键检查点
当你怀疑 vertical-align 没生效，按顺序确认：
- 目标元素的
display值是否为inline、inline-block或table-cell？用 DevTools 查看 computed 样式 - 它的父容器是否设置了
line-height？vertical-align: middle是相对于父元素的 baseline + half x-height 计算的，line-height过小会导致“看起来没动” - 是否存在 margin/padding/border 导致视觉错位？
vertical-align不影响盒模型尺寸，但会影响基线对齐位置，常被误认为“没对齐”
真正容易被忽略的是：Bootstrap 的响应式栅格在小屏幕下会换行，此时 vertical-align 失去上下文（不在同一行了），对齐逻辑自动失效 —— 这不是 bug，是 CSS 行内格式化上下文的天然限制。
