Question

我正在尝试使用Bootstrap 3显示进度条，其中包含以下代码：

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

输出屏幕截图：

screenshot

但是，这会导致文本“60％”显示在右侧，而不是显示在进度条的中心。如何将此文本居中，以便它出现在中心？

Answer 1

我会在span标记上放一个类，并将标记放在progress-bar类之前。然后将范围设置为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/

Answer 2

添加到@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/

Answer 3

Twitter的bootstrap .span类浮动到左侧。尝试将float:none添加到可能有效的范围内！

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

<强>更新这肯定有用：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;
 }

Answer 4

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

Answer 5

试试这个我使用了<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>

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

5 个答案: