Twitter Bootstrap: Wyśrodkuj tekst na pasku postępu

Używałem Bootstrap Twittera i chciałbym, aby tekst na pasku postępu był wyśrodkowany na pasku on niezależnie od wartości.

Poniższy link jest tym, co mam teraz. Chciałbym, aby cały tekst był wyrównany z dolnym paskiem most.

Zrzut ekranu:

pasek postępu

Próbowałem jak najlepiej z czystym CSS i staram się unikać używania JS, jeśli to możliwe, ale jestem gotów to zaakceptować, jeśli jest to najczystszy sposób, aby to zrobić.

<div class="progress">
    <div class="bar" style="width: 86%">517/600</div>
</div>
Author: Ryan Hu, 2012-10-17
Source

3 answers

Bootstrap 4.0.0 z klasami narzędzi: (Dzięki MaPePeR za dodanie) 

<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 obsługuje teraz tekst wewnątrz elementu span na pasku postępu. HTML jak w przykładzie Bootstrap. (Zauważ, że klasa sr-onlyzostała usunięta)

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>

... Jednak Wyśrodkowuje tylko tekst zgodnie z samym paskiem, więc potrzebujemy trochę niestandardowego CSS.

Wklej to w innym arkusz stylów / poniżej gdzie wczytujesz Bootstrap ' a css:

CSS: 

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

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

Plik JsBin: http://jsbin.com/IBOwEPog/1/edit

Bootstrap 2:

Wklej to w innym arkuszu stylów/poniżej, gdzie wczytujesz css Bootstrapa: 

/**
 * 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%;
}

Następnie dodaj tekst do paska postępu, dodając element span Na Zewnątrz .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

 138
Author: Thomas Maurstad Larsson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-06 11:56:20

Aby działał poprawnie, bez względu na to, jak długi jest Twój tekst, zajrzyj tutaj

Http://jsfiddle.net/b5tbG/

Musisz wyjąć tekst z div

 11
Author: Caelea,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-17 15:20:09

Bootstrap 3 odpowiedź, jak pokazano w przykładzie 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
Author: Anonymous,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-31 02:13:03