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

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

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

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

Ответы

Ответ 1

Bootstrap 4 (протестирован с 4.0.0-beta.2 - нет причин полагать, что это изменится):

Bootstrap 4 использует flex для позиционирования индикатора выполнения. Мы перемещаем элемент span в элемент .progress, чтобы обойти это.

Благодаря Michael_B для простого решения. (Пожалуйста, внесите изменения, если вы знаете, как заставить его работать, не перемещая элемент span)

HTML:

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

CSS:

/**
 * Progress bars with centered text
 */
.progress span {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

JsBin файл: http://jsbin.com/wazisep/1/edit

Загрузочный файл 3:

Boostrap теперь поддерживает текст внутри элемента span на панели Progress. 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.

Вставьте это в другую таблицу стилей/ниже, где вы загружаете 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; // You might need to change it
    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

Ответ 2

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

http://jsfiddle.net/b5tbG/

Вам нужно извлечь текст из div

Ответ 3

Bootstrap 3 ответ, как показано в примере загрузки

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