我正在创建一个水平计数器来标记您当前正在处理的步骤。我们使用bootstrap 4.css工作时没有bootstrap,但是当我将它添加到项目中时,它不会对齐垂直。文字在圆圈下面。bootstrap css文本不垂直对齐
数量应居中垂直和圆圈内的水平。
我该如何在引导项目中使这个CSS工作?
HTML
.steps {
margin: auto;
text-align: center;
font-size: 40px;
text-align: center !important;
vertical-align: middle !important;
}
.steps div{
display: inline-block;
}
.steps .circle {
border-radius:100px;
width: 75px;
height: 75px;
text-align: center !important;
vertical-align: middle !important;
line-height: 75px;
}
.steps .separator {
width: 100px;
margin:0px -5px 0px -5px;
vertical-align: middle !important;
}
.steps .done {
\t color:#35FF8B;
}
.steps .done .circle {
\t border:3px solid #35FF8B;
\t background:#385463;
}
.steps .done .separator {
\t border:4px solid #35FF8B;
}
<div class="steps">
<div class="done">
<div class="circle">
1
</div>
<div class="separator"></div>
</div>
</div>
谢谢!这工作:D只有一个细节仍然不适合我。该号码不是垂直对齐的。 查看更新后的照片:) – 9minday
欢迎:).....调整行高..它可能工作! –
谢谢!行高70px工作! – 9minday