☰

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

tag-icon • tag-icon css twitter-bootstrap progress-bar centering
Twitter Bootstrap: プログレスバーのテキストを中央に配置する 質問する

私は Twitter のブートストラップを使用しており、プログレス バーのテキストを値に関係なくバーの中央に配置するようにしたいと考えています。

以下のリンクが現在私が持っているものです。すべてのテキストを一番下のバーに揃えたいと思います。

スクリーンショット:

プログレスバー

私は純粋な CSS で最善を尽くし、可能であれば JS の使用を避けようとしていますが、それが最もクリーンな方法であるなら受け入れるつもりです。

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

ベストアンサー1

ブートストラップ5:(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:（感謝マペペール追加用）

<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>

ブートストラップ 3:

Bootstrap は、プログレス バーの 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 をロードする別のスタイルシートまたは以下に貼り付けます。

CS: ...

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

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

JsBin ファイル: http://jsbin.com/IBOwEPog/1/編集

ブートストラップ 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/編集

おすすめ記事