Twitter Bootstrap：进度条上的中心文本 [英] Twitter Bootstrap: Center Text on Progress Bar

问题描述

我一直在使用Twitter的引导程序，我希望进度栏上的文本能集中在on bar，而不管其值。

下面的链接是我现在的。

屏幕截图：

我用纯CSS尝试了我最好的，尽量避免使用JS，但如果是最简单的方法，我愿意接受它。

 < div class =progress> 
< div class =barstyle =width：86％> 517/600< / div> 
< / div> 
  

解决方案

Bootstrap 3： / p>

Boostrap现在支持进度栏中span元素内的文本。在Bootstrap的例子中提供的HTML。 （注意，除去 sr-only 类）

HTML：

 < div class =progress> 
< div class =progress-barrole =progressbararia-valuenow =60aria-valuemin =0aria-valuemax =100style =width：60％;> ; 
< span> 60％完成< / span> 
< / div> 
< / div> 
  

...但它只是根据bar本身居中文本，所以我们需要一个

$ b

  / ** 
 *以文本为中心的进度条
 * / 
 
 .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 {
 position ：相对; 
} 
 
 .bar {
 z-index：1; 
 position：absolute; 
} 
 
 .progress span {
 position：absolute; 
 top：0; 
 z-index：2; 
 color：black; //你可能需要改变它
 text-align：center; 
 width：100％; 
} 
  

然后通过添加 span 元素.bar：

 < div class =progress> 
< div class =barstyle =width：50％>< / div> 
< span>在此处添加您的文字< / span> 
< / div> 
  

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

I've been using Twitter's bootstrap and I would like the text on the progress bar to be centered on the on bar regardless of value.

The below link is what I have now. I would like all text to be aligned with the bottom most bar.

Screenshot:

I've tried my best with pure CSS and I'm trying to avoid using JS if possible but I'm willing to accept it if it's the cleanest way to do it.

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

解决方案

Bootstrap 3:

Boostrap now supports text within a span element in the Progress bar. HTML as provided in Bootstrap's example. (Notice the class sr-onlyis removed)

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>

... It does however only center the text according to the bar itself, so we need a little bit of custom CSS.

Paste this in another stylesheet/below where you load bootstrap's css:

CSS:

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

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

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

---

Bootstrap 2:

Paste this in another stylesheet/below where you load bootstrap's css:

/**
 * Progress bars with centered text
 */
.progress {
    position: relative;
}

.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%;
}

Then add text to a progress bar by adding a span element outside .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

这篇关于Twitter Bootstrap：进度条上的中心文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！