bootstrap css文本不垂直對齊

-1

我正在創建一個水平計數器來標記您當前正在處理的步驟。我們使用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>

來源

2017-07-29 9minday

你做到這一點使用的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>

來源

2017-07-29 11:11:16

謝謝！這工作：D只有一個細節仍然不適合我。該號碼不是垂直對齊的。查看更新後的照片:) – 9minday

歡迎：）.....調整行高..它可能工作！ –

謝謝！行高70px工作！ – 9minday

我不知道最終的佈局應該是什麼樣子，但我會用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>

來源

2017-07-29 11:08:16 Gerard

試試這個，對於引導路線

<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

來源

2017-07-29 11:18:27

bootstrap css文本不垂直對齊

回答

相關問題