我想显示一个进度条,通过引导3,用下面的代码:如何在bootstrap 3进度条中居中文本?
<div class="progress">
<div class="progress-bar" style="width: 60%;">
</div>
<span>60%</span>
</div>
输出的屏幕截图:
然而,这导致文本'60% '显示在右侧,而不是显示在进度条的中心。我怎样才能将这段文字居中?所以它出现在中心?
我想显示一个进度条,通过引导3,用下面的代码:如何在bootstrap 3进度条中居中文本?
<div class="progress">
<div class="progress-bar" style="width: 60%;">
</div>
<span>60%</span>
</div>
输出的屏幕截图:
然而,这导致文本'60% '显示在右侧,而不是显示在进度条的中心。我怎样才能将这段文字居中?所以它出现在中心?
我会穿上跨度标签类,和之前把标签进度条类。然后跨度设定为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;
}
.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;}
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;
}
不,不起作用。请在发布之前测试您的答案。 – 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;
}
尝试了这一点,我用的<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>
+1我从事这项工作。 [DEMO](HTTP:// bootply。com/109265) – Ruddy
无论出于何种原因,我总是喜欢定义右和左,而不是宽度...谢谢@Ruddy – bozdoz
这两个工作,随时在您的答案中使用我的演示。只是增加了另一种选择做得好。 – Ruddy