html - bootstrap css 文本不垂直对齐

Question

我正在创建一个水平计数器来标记您当前正在处理的步骤。我们使用 bootstrap 4。css 在没有 bootstrap 的情况下工作，但是当我将它添加到元素中时，它没有垂直对齐。文字在圆圈下方。

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

如何让这个 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 {
	color:#35FF8B;
}

.steps .done .circle {
	border:3px solid #35FF8B;
	background:#385463;
}

.steps .done .separator {
	border:4px solid #35FF8B;
}

<div class="steps">
  <div class="done">
    <div class="circle">
        1
    </div>
    <div class="separator"></div>
   </div>
</div>

Answer 1

您还可以使用 line-height 执行此操作...删除填充并添加 width:75px 和 height: 75px; 和 line-height:75px ;

.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 {
  color:#35FF8B;
}

.steps .done .circle {
  border:3px solid #35FF8B;
  background:#385463;
}

.steps .done .separator {
  border:4px solid #35FF8B;
}

<div class="steps">
  <div class="done">
    <div class="circle">
        1
    </div>
    <div class="separator"></div>
   </div>
</div>