少し違うことをするようにコードを変更しようとしていますが、動作させることができません。これはコードです:
<div id="progress-bar" class="all-rounded">
<div id="progress-bar-percentage" class="all-rounded" style="width: 88%">88/100</div>
</div>
これは以下をレンダリングします:
この CSS の使用:
.all-rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.spacer {
display: block;
}
#progress-bar {
width: 100px;
background: #cccccc;
}
#progress-bar-percentage {
background: #3063A5;
padding: 5px 0px;
color: #FFF;
text-align: center;
}
テキスト88/100が内側の div 内に印刷されているprogress-bar-precentage
ため、この div に対して中央に配置されていることがわかります。これの問題は、progress-bar-precentage
幅が非常に小さい場合、テキストがずれてしまうことです。私の考えは、外側のdivprogress-bar
なので、内側のdivに関係なく常に配置されますが、テキストを上部と中央に配置する方法がわかりません。アイデアはありますか?