진행률 표시 줄 부트 스트랩에서 텍스트를 수직으로 정렬하는 방법

Question

진행률 표시 줄의 높이를 변경하기로 결정했는데 텍스트가 진행률 막대 내부에서 세로로 정렬되지 않는 것 같습니다.

내가 만든 jsfiddle입니다. 당신의 스팬의

jsfiddle

<div class="container"> 
    <div class="progress" style="height:40px;"> 

    <div class="progress-bar progress-bar-success" style="width: 50%"> 
    </div> 
    <div class="progress-bar progress-bar-warning" style="width: 27%"> 
    <span style="" id="spanP">60%</span> 
    </div> 

</div> 
</div> 

Answer 1

변경 라인 높이.

<div class="container"> 
    <div class="progress" style="height:40px;"> 

    <div class="progress-bar progress-bar-success" style="width: 50%"> 
    </div> 
    <div class="progress-bar progress-bar-warning" style="width: 27%"> 
    <span style="line-height: 39px;" id="spanP">60%</span> 
    </div> 

</div> 
</div> 

감사