按钮和文字混排垂直居中失效，因align-items仅在flex容器上对其直接子元素生效；推荐用vertical-align: middle配合line-height统一基线，或外层设display: flex+align-items: center。
按钮和文字混排时垂直居中对齐失效？
直接给按钮加 align-items: center 没用，因为这个属性只在 flex 容器上生效，且只作用于其**直接子元素**。如果你把按钮和文字写在一行里（比如 <span>文字</span><button>点我</button>），它们默认是 inline 元素，父容器不是 flex 布局，align-items 就完全不触发。
让按钮和文字在行内高度一致的最简方案
不用 flex 也能搞定，关键是统一基线或高度。推荐优先用 vertical-align：
-
vertical-align: middle对大多数情况够用，但注意它对齐的是“字母x高”的中线，不是容器正中心 - 如果按钮有边框或内边距导致视觉偏高，配合
line-height或font-size统一更稳 - 避免用
vertical-align: baseline（默认值），文字和按钮底部会错开，尤其按钮带图标时明显
span, button {
vertical-align: middle;
line-height: 1.5; /* 和文字行高一致 */
}必须用 flex 的场景：按钮+文字需要整体居中或响应式控制
当父容器要同时控制多个按钮、图标、文字的横向/纵向关系时，flex 是更可控的选择。关键点：
- 把包裹按钮和文字的外层元素设为
display: flex，不是按钮自己设 - 用
align-items: center垂直居中，用gap: 8px替代margin控制间距 - 如果按钮内部文字不居中，记得检查
padding是否上下对称，否则会破坏整体对齐
<div class="inline-group">
<span>操作项：</span>
<button>保存</button>
<button>取消</button>
</div>
<p>.inline-group {
display: flex;
align-items: center;
gap: 8px;
}容易被忽略的兼容性和细节
align-items: center 在 IE10+ 支持良好，但 gap 在 IE 完全不支持，老项目需回退到 margin；另外，vertical-align 对 input[type="button"] 也有效，但对 textarea 或绝对定位元素无效。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是写法，而是混合使用 inline 元素和块级按钮时，line-height、font-size、box-sizing 三者稍有不一致，视觉偏差就出来了——建议所有同行元素统一设置 box-sizing: border-box 和显式 font-size。
