Html 引导css文本不垂直对齐

我正在创建一个水平计数器来标记您当前正在执行的步骤。我们使用bootstrap4。css在没有引导的情况下工作，但是当我将它添加到项目中时，它没有垂直对齐。正文在圆圈下面

数字应在圆圈内垂直和水平居中

我如何使这个css在bootstrap项目中工作

HTML

。步骤{
保证金：自动；
文本对齐：居中；
字体大小：40px；
文本对齐：居中！重要；
垂直对齐：中间！重要；
}
.台阶分区{
显示：内联块；
}
.台阶.圆圈{
边界半径：100px；
宽度：75px；
高度：75px；
文本对齐：居中！重要；
垂直对齐：中间！重要；
线高：75px；
}
.步骤.分离器{
宽度：100px；
保证金：0px-5px 0px-5px；
垂直对齐：中间！重要；
}
.步骤.完成{
颜色：#35FF8B；
}
.步骤.完成.循环{
边框：3px实心#35FF8B；
背景#385463；
}
.步骤.完成.分隔符{
边框：4px实心#35FF8B；
}

1.

我不确定最终的布局应该是什么样子，但我会使用FlexBox水平和垂直居中

。步骤{
保证金：自动；
字体大小：40px；
}
.台阶.圆圈{
边界半径：50%；
宽度：75px；
高度：75px；
背景：浅蓝色；
边框：淡蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.步骤.分离器{
宽度：100px；
}
.步骤.完成{
颜色：#35FF8B；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
.步骤.完成.循环{
边框：3px实心#35FF8B；
背景#385463；
}
.步骤.完成.分隔符{
边框：4px实心#35FF8B；
}

1.

您也可以使用线条高度来执行此操作。。。移除填充物并添加

宽度：75px

和

高度：75px和
行高：75px


。步骤{
保证金：自动；
文本对齐：居中；
字体大小：40px；
文本对齐：居中！重要；
垂直对齐：中间！重要；
}
.台阶分区{
显示：内联块；
}
.台阶.圆圈{
边界半径：100px；
宽度：75px；
高度：75px；
文本对齐：居中！重要；
垂直对齐：中间！重要；
线高：75px；
}
.步骤.分离器{
宽度：100px；
保证金：0px-5px 0px-5px；
垂直对齐：中间！重要；
}
.步骤.完成{
颜色：#35FF8B；
}
.步骤.完成.循环{
边框：3px实心#35FF8B；
背景#385463；
}
.步骤.完成.分隔符{
边框：4px实心#35FF8B；
}

1.
尝试此方法，以进行引导校准

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

基线
顶部
中间的
底部
文本顶部
文本底部

请参阅文档
谢谢！这起作用了：我只有一个细节仍然不适合我。数字没有垂直对齐。看到更新后的图片：）很高兴帮助你：）