先给li设display: flex并用align-items: center对齐子项，再用gap控制圆圈与文字间距；避免混用line-height和padding，伪元素做圆圈更稳定。
步骤条中 li 内文字与圆圈不对齐？先看 display 类型和盒模型
步骤条通常用 ul/li 实现，每个 li 包含一个圆圈（span 或伪元素）和文字。常见错误是文字“飘”在圆圈上方或下方，根本原因是默认 li 是块级，而圆圈常设为 inline-block 或 flex 子项，导致基线对齐错位。
关键不是强行调 vertical-align，而是统一子元素的对齐上下文：
-
li设为display: flex，再用align-items: center对齐所有子项（圆圈 + 文字） - 避免混用
line-height和padding控制高度——它们会干扰 flex 的自然居中逻辑 - 如果圆圈用伪元素（如
::before），确保它没有脱离文档流（别加position: absolute）
text-align: center 为什么对步骤条整体无效？
text-align: center 只影响行内内容在块容器内的水平位置，它不会让 li 自身居中，也不会修正圆圈和文字之间的垂直偏移。如果你发现整个步骤条没居中，问题不在 li 内部，而在父容器（如 ul）本身没居中。
正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 给
ul设置display: flex; justify-content: center;（现代方案） - 或给
ul设固定宽度 +margin: 0 auto;（兼容旧浏览器） - 不要在
ul上写text-align: center——它对li这种块级子元素完全不起作用
圆圈用 span 还是伪元素？对居中影响很大
用真实 span 做圆圈更可控：你可以直接给它设宽高、display: inline-block、vertical-align: middle，再配合父 li 的 line-height；但这种方式在多行文字或响应式场景下容易断裂。
推荐用伪元素 + flex：
li {
display: flex;
align-items: center;
gap: 8px; /* 圆圈和文字间距 */
}
li::before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background: #007bff;
}
这样圆圈和文字天然同轴，无需计算 line-height 或 margin-top。
IE11 或低版本安卓 WebView 下 flex 失效怎么办？
IE11 支持 flex，但部分安卓 WebView（如 4.4.x）对 align-items: center 解析不一致。此时可降级为 line-height 方案，但必须严格满足三个条件：
-
li高度固定（如height: 40px） -
li内圆圈用inline-block并设vertical-align: middle -
li设line-height: 40px，且文字不换行（white-space: nowrap）
注意：一旦文字可能换行，这个方案就会崩，必须切回 flex 或用 table-cell（不推荐，语义差）。
真正麻烦的不是怎么居中，而是步骤条往往要同时响应状态变化（active/current）、连接线绘制、以及小屏折叠。这些叠加之后，flex 的 gap 和 justify-content 组合反而比一堆 margin 和 position 更稳定——前提是别在同一个 li 里混用 flex 和 line-height。
