divの真ん中に縦のグラフバーを表示する

Question

私はプログレスバーの中央にパーセントテキストを表示できるようにするために必要なプログレスバーを持っています。現時点では、値は進行状況バーの中央に垂直に配置されていません。私はHTMLとCSSとjQueryのではないか、JavaScriptでこれを実行する必要が

.vertical .progress-bar { 
 
    float: left; 
 
    height: 100px; 
 
    width: 40px; 
 
    margin-right: 10px; 
 
} 
 
.vertical .progress-track { 
 
    position: relative; 
 
    width: 40px; 
 
    height: 100%; 
 
    background: #fff; 
 
    border: 1px solid #ebebeb; 
 
} 
 
.vertical .progress-fill { 
 
    position: relative; 
 
    height: 50%; 
 
    width: 40px; 
 
    color: #fff; 
 
    text-align: center; 
 
}

<div class="vertical"> 
 
    <div class="progress-bar"> 
 
    <div class="progress-track"> 
 
     <div class="progress-fill" style="height: 100%; top: 0%; background: rgb(191, 231, 178);"></div> 
 
     <span style="color: rgb(0, 0, 0);">100%</span> 
 
    </div> 
 
    </div> 
 

 
    <div class="progress-bar"> 
 
    <div class="progress-track"> 
 
     <div class="progress-fill" style="height: 80%; top: 20%; background: rgb(248, 231, 153);"></div> 
 
     <span style="color: rgb(0, 0, 0);">80%</span> 
 
    </div> 
 
    </div> 
 

 
    <div class="progress-bar"> 
 
    <div class="progress-track"> 
 
     <div class="progress-fill" style="height: 60%; top: 40%; background: rgb(248, 231, 153);"></div> 
 
     <span style="color: rgb(0, 0, 0);">60%</span> 
 
    </div> 
 
    </div> 
 

 
    <div class="progress-bar"> 
 
    <div class="progress-track"> 
 
     <div class="progress-fill" style="height: 2%; top: 98%; background: rgb(248, 138, 138);"> 
 
     <span style="color: rgb(0, 0, 0);">0%</span> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

以下

改訂答え。ここでフィドルを参照してください。https://jsfiddle.net/ybygucn7/

HTML：

<div class="vertical"> 
    <div class="progress-bar"> 
     <div class="progress-track"> 
      <span style="color: rgb(0, 0, 0);">100%</span> 
      <div class="progress-fill" style="height: 100%; background: rgb(191, 231, 178);"></div> 
     </div> 
    </div> 
</div> 

CSS：あなたのHTML内と.progress-barオーバーフローがhiddenを持っているCSSで

.vertical .progress-bar { 
    height: 100px; 
    width: 40px; 
    display: inline-block; 
    margin: 0 5px; 
    font-size: 12px; 
    text-align: center; 
} 

.progress-bar .progress-track { 
    width: 100%; 
    height: 100%; 
    background: #fff; 
    border: 1px solid #ebebeb; 
    position: relative; 
} 

.vertical .progress-fill { 
    width: 100%; 
    color: #fff; 
    text-align: center; 
    position: absolute; 
    z-index: 0; 
    bottom: 0; 
} 

.vertical span { 
    position: absolute; 
    z-index: 1; 
    top: 50%; 
    width: inherit; 
    left: 0; 
    transform: translateY(-50%); 
} 

Answer 2

私が行った変更、これを試してみてください。

.vertical .progress-bar { 
 
    float: left; 
 
    height: 100px; 
 
    width: 40px; 
 
    margin-right: 10px; 
 
    overflow:hidden; 
 
} 
 
.vertical .progress-track { 
 
    position: relative; 
 
    width: 40px; 
 
    height: 100%; 
 
    background: #fff; 
 
    border: 1px solid #ebebeb; 
 
    //overflow:hidden; 
 
} 
 
.vertical .progress-fill { 
 
    position: relative; 
 
    height: 50%; 
 
    width: 40px; 
 
    color: #fff; 
 
    text-align: center; 
 
}

<div class="vertical"> 
 
    <div class="progress-bar"> 
 
    <div class="progress-track"> 
 
     <span style="color: rgb(0, 0, 0);top:20%;position:absolute;z-index:1;">100%</span> 
 
     <div class="progress-fill" style="background: rgb(191, 231, 178);height:100px; top:0%;"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="progress-bar"> 
 
    <div class="progress-track"> 
 
     <span style="color: rgb(0, 0, 0);top:20%;position:absolute;z-index:1;">80%</span> 
 
     <div class="progress-fill" style="background: rgb(248, 231, 153);height:80px; top:20%;"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="progress-bar"> 
 
    <div class="progress-track"> 
 
     <span style="color: rgb(0, 0, 0);top:40%;position:absolute;z-index:1;">60%</span> 
 
    <div class="progress-fill" style="background: rgb(248, 231, 153);height:60px; top:40%;"></div> 
 
    
 
    </div> 
 
    </div> 
 

 
    <div class="progress-bar"> 
 
    <div class="progress-track"> 
 
     <span style="color: rgb(0, 0, 0);top:40%;position:absolute;z-index:1;">0%</span> 
 
<div class="progress-fill" style="background: rgb(248, 138, 138);height:5px; top:95%;"> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>