Twitter Bootstrap。プログレスバーのテキストを中央に配置する

質問

Twitterのbootstrapを使っているのですが、プログレスバーのテキストを値に関係なくオンバーの中央に表示させたいのですが、どうすればよいでしょうか？

下のリンクが今の状態です。 全てのテキストを一番下のバーに揃えたいのですが。

スクリーンショットです。

純粋なCSSで頑張ったので、JSはなるべく使いたくないのですが、一番きれいな方法であれば受け入れたいと思います。

<div class="progress">
    <div class="bar" style="width: 86%">517/600</div>
</div>

どのように解決するのですか？

Bootstrap5です。 (v4xと同じ)

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

Bootstrap 4とユーティリティクラス。 (おかげさまで MaPePeR に感謝します)

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

Bootstrap3です。

Bootstrap は Progress バーの span 要素内のテキストをサポートするようになりました。Bootstrapの例で提供されているようなHTMLです。(クラス sr-only が削除されていることに注意してください)

HTMLです。

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60% Complete</span>
    </div>
</div>

... しかし、これはバー自体に従ってテキストをセンタリングするだけなので、少しカスタムCSSが必要です。

これを別のスタイルシート/bootstrapのCSSを読み込む場所に貼り付けます。

CSSです。

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
 }

JsBinファイルです。 http://jsbin.com/IBOwEPog/1/edit

Bootstrap 2 です。

BootstrapのCSSを読み込む別のスタイルシート/以下に貼り付けてください。

/**
 * Progress bars with centered text
 */
.progress {
    position: relative;
}

.progress .bar {
    z-index: 1;
    position: absolute;
}

.progress span {
    position: absolute;
    top: 0;
    z-index: 2;
    color: black; /* Change according to needs */
    text-align: center;
    width: 100%;
}

次に、プログレスバーにテキストを追加するために span 要素の外側に .bar :

<div class="progress">
    <div class="bar" style="width: 50%"></div>
    <span>Add your text here</span>
</div>

JsBinです。 http://jsbin.com/apufux/2/edit