Topic-icon Progress Bar center text (vycentrování textu)

  • Panáček Ondřej (NetteMan)
  • Avatar uživatele Panáček Ondřej (NetteMan) Autor tématu
  • Offline
  • Začátečník
  • Začátečník
Více
01. čen 2017 12:03 #334 od Panáček Ondřej (NetteMan)
Progress Bar center text (vycentrování textu) vytvořil uživatel Panáček Ondřej (NetteMan)
Zdravím,

používám na svém webu Bootstrap a potřeboval bych u Progress Baru vycentrovat text, tak aby nebyl vycentrovaný na střed vybarvené části, ale aby byl vycentrovaný na střed celé šířky Progress Baru.

Místo tohoto (výchozí stav):

chci mít toto:


Díky za rady.

Tato zpráva obsahuje přiložené obrázky.
Prosím, přihlašte se nebo se zaregistruje, pro jejich zobrazení.

Prosím Přihlásit se nebo Vytvořit účet připojte se ke konverzaci.

  • CMS systémy (cmssystemy)
  • Avatar uživatele CMS systémy (cmssystemy)
  • Offline
  • Administrator
  • Administrator
  • Všechny redakční systémy na jednom místě
Více
01. čen 2017 12:12 #335 od CMS systémy (cmssystemy)
Odpověděl CMS systémy (cmssystemy) pro téma Progress Bar center text (vycentrování textu)
Dobrý den,

lze to udělat následovně:

Pro Bootstrap 3:

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>

CSS3:
/* Progress bar s vycentrovaným textem */
.progress {
    position: relative;
}
.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black; // barvu si upravte podle potřeby
 }

Pro Bootstrap 2:+
HTML:
<div class="progress">
    <div class="bar" style="width: 50%"></div>
    <span>Add your text here</span>
</div>
CSS:
/* Progress bar s vycentrovaným textem */
.progress {
    position: relative;
}
.progress .bar {
    z-index: 1;
    position: absolute;
}
.progress span {
    position: absolute;
    top: 0;
    z-index: 2;
    color: black; // barvu si upravte podle potřeby
    text-align: center;
    width: 100%;
}

Prosím Přihlásit se nebo Vytvořit účet připojte se ke konverzaci.

Přihlášení