如何在bootstrap 3进度条中居中文本？

我想显示一个进度条，通过引导3，用下面的代码：如何在bootstrap 3进度条中居中文本？

<div class="progress"> 
     <div class="progress-bar" style="width: 60%;"> 
     </div> 
     <span>60%</span> 
    </div>

输出的屏幕截图：

screenshot

然而，这导致文本'60％ '显示在右侧，而不是显示在进度条的中心。我怎样才能将这段文字居中？所以它出现在中心？

来源

2014-01-29 Click Upvote

我会穿上跨度标签类，和之前把标签进度条类。然后跨度设定为position:absolute，给进步text-align:center：

HTML：

<div class="progress"> 
    <span class="progress-value">60%</span> 
    <div class="progress-bar"></div> 
</div>

CSS：

.progress { 
    text-align:center; 
} 
.progress-value { 
    position:absolute; 
    right:0; 
    left:0; 
}

观看演示：http://jsfiddle.net/bozdoz/fSLdG/2/

来源

2014-01-29 10:32:53 bozdoz

+1我从事这项工作。 [DEMO]（HTTP：// bootply。com/109265） – Ruddy

无论出于何种原因，我总是喜欢定义右和左，而不是宽度...谢谢@Ruddy – bozdoz

这两个工作，随时在您的答案中使用我的演示。只是增加了另一种选择做得好。 – Ruddy

.progress{ border: 5px solid;} 
.progress-bar{background: #369;line-height: 50px;display: inline-block;} 
.progress span{display: block; margin: 0px auto; width: 40px; margin-top: -50px; line-height: 50px; color: #fff;}

来源

2014-01-29 10:21:10

这些方法都不奏效.... – Ruddy

http://jsfiddle.net/VpfkM/ –

它不会在你的jsfiddle工作 –

Twitter的引导程序.span类被漂浮在左边。尝试添加float:none到它可能工作的范围！

.progress span{ 
    margin: 0px auto; 
    float:none; 
}

UPDATE： 这工作肯定的：HTML

<div class="progress"> 
    <div class="bar" style="width: 60%;"></div> 
    <span>60%</span> 
</div>

CSS：

.progress { 
    position: relative; 
} 

.bar { 
    z-index: 1; 
    position: absolute; 
    } 

.progress span { 
    position: absolute; 
    top: 0; 
    z-index: 2; 
    text-align: center; 
    width: 100%; 
    color: black; 
}

来源

2014-01-29 10:29:20

不，不起作用。请在发布之前测试您的答案。 – Ruddy

添加到@bozdoz答案：

绝对定位进度百分比指标将这样的伎俩：

HTML

<div class="progress"> 
    <div class="progress-bar" style="width: 60%;"> 
    </div> 
    <span>60%</span> 
</div>

CSS

.progress { 
    position:relative; 
} 
.progress span { 
    position:absolute; 
    left:0; 
    width:100%; 
    text-align:center; 
    z-index:2; 
    color:white; 
}

小提琴：http://jsfiddle.net/Varinder/ejgp5/

来源

2014-01-29 10:34:59 Varinder

尝试了这一点，我用的<center> </center>标签我不是肯定有向后兼容性，但我已经测试过在Chrome和Mozilla Firefox中都有当前版本。

示例代码（不需要任何CSS）：

<div class="progress progress-striped active" style="margin:0 10%;display:none;" id="uploadProgressbar"> 
     <center><b><span class="progress-value" id="uploadProgressValue" style="color:red;">00%</span> </b></center> 
      <div class="progress-bar progress-bar-primary" role="progressbar" id="uploadProgress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 

      </div> 
</div>

来源

2016-09-10 08:53:09

如何在bootstrap 3进度条中居中文本？

回答

相关问题