twitter-bootstrap 如何在引导程序 3 进度条中居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21428031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center text in bootstrap 3 progress bar?
提问by Click Upvote
I'm trying to display a progress bar, using Bootstrap 3, with the following code:
我正在尝试使用 Bootstrap 3 显示进度条，代码如下：
<div class="progress">
<div class="progress-bar" style="width: 60%;">
</div>
<span>60%</span>
</div>
Screenshot of output:
输出截图：
However, this causes the text '60%' to be displayed towards the right, rather than in the center of the progress bar. How can I center this text, so it appears in the center?
但是，这会导致文本“60%”显示在右侧，而不是显示在进度条的中心。我怎样才能让这个文本居中，让它出现在中心？
回答by bozdoz
I would put a class on the span tag, and put the tag before the progress-bar class. Then set the span to position:absoluteand give progress text-align:center:
我会在 span 标签上放一个类，并将标签放在进度条类之前。然后将跨度设置为position:absolute并给出进度text-align:center：
HTML:
HTML：
<div class="progress">
<span class="progress-value">60%</span>
<div class="progress-bar"></div>
</div>
CSS:
CSS：
.progress {
text-align:center;
}
.progress-value {
position:absolute;
right:0;
left:0;
}
See demo: http://jsfiddle.net/bozdoz/fSLdG/2/
回答by Varinder
Adding to @bozdoz answer:
添加到@bozdoz 答案：
Absolutely positioning the progress percentage indicator will do the trick:
绝对定位进度百分比指示器可以解决问题：
HTML
HTML
<div class="progress">
<div class="progress-bar" style="width: 60%;">
</div>
<span>60%</span>
</div>
CSS
CSS
.progress {
position:relative;
}
.progress span {
position:absolute;
left:0;
width:100%;
text-align:center;
z-index:2;
color:white;
}
回答by Abhay Desai
Twitter's bootstrap .spanclasses are floated to the left. Try adding float:noneto the span it might work!
Twitter 的引导.span类浮动到左侧。尝试添加float:none到可能有效的跨度！
.progress span{
margin: 0px auto;
float:none;
}
UPDATE:This works for sure: HTML
更新：这肯定有效：HTML
<div class="progress">
<div class="bar" style="width: 60%;"></div>
<span>60%</span>
</div>
CSS:
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;
}
回答by Moorthy GK
.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;}
回答by kinsley kajiva
try this out i used the <center> </center>tag i am not sure about backward compatibility but i have tested in chrome and Mozilla Firefox and there are current.
试试这个我使用了<center> </center>标签我不确定向后兼容性，但我已经在 chrome 和 Mozilla Firefox 中进行了测试，并且有最新的。
sample code (doesn't need any CSS):
示例代码（不需要任何 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>
