bootstrap css文本不垂直对齐

Question

我正在创建一个水平计数器来标记您当前正在处理的步骤。我们使用bootstrap 4.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 {
	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;

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

.steps {
  margin: auto;
  font-size: 40px;
}

.steps .circle {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  background: lightblue;
  border: thin solid blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.steps .separator {
  width: 100px;
}

.steps .done {
	color:#35FF8B;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.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 3

试试这个，用于bootstrap对齐

<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>

请参阅文档Vertical-Alignments-Demo