ブートストラップCSSのテキストが垂直に整列していません

Question

現在作業しているステップをマークする水平カウンタを作成しています。私たちはブートストラップ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 { 
 
\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>

Answer 1

...パディングを削除し、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>

Answer 2

私は最終的なレイアウトがどのように見えるかわからないんだけど、私は水平方向と垂直方向の両方中央にflexboxesを使用します。あなたはこのも行の高さを使用してください

.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 { 
 
\t color:#35FF8B; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
} 
 

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

Answer 3

ブートストラップ・アライメント

<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