Twitter Bootstrap: центр текста на панели прогресса

Я использую bootstrap Twitter, и я хотел бы, чтобы текст на панели прогресса был сосредоточен на панели on независимо от значения.

ниже Ссылка-это то, что у меня есть сейчас. Я хотел бы, чтобы весь текст был выровнен с самой нижней панелью.

скриншоты:

Я старался изо всех сил с чистым CSS, и я пытаюсь избежать использования JS, если это возможно, но я готов принять его, если это самый чистый способ сделать это.

<div class="progress">
    <div class="bar" style="width: 86%">517/600</div>
</div>
3 52
css twitter-bootstrap progress-bar centering

3 ответа:

Bootstrap 4.0.0 с классами утилит: (спасибо 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>

Bootstrap 3:

Boostrap теперь поддерживает текст внутри элемента span в строке выполнения. HTML, как указано в Примере Bootstrap. (Обратите внимание на класс 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.

вставьте это в другую таблицу стилей / ниже, где вы загружаете css bootstrap:

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:

вставьте это в другую таблицу стилей / ниже, где вы загружаете css bootstrap:

/**
 * 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 элемент снаружи .бар:

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

JsBin:http://jsbin.com/apufux/2/edit

138

чтобы он работал правильно, независимо от того, как долго ваш текст не смотрите здесь

http://jsfiddle.net/b5tbG/

вам нужно будет взять текст из div

11

Bootstrap 3 Ответ, как показано в Примере bootstrap

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