html - 将多个栏中的文本居中放置在同一个 .progress 中

Question

进度条的代码是:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

我想写一段文字，把它放在那些堆积如山的进度条的中央。

示例来自 bootstrap 网站，我的代码类似，只是我在同一个代码中只使用了 2 个进度条。但通常解决方案应该适用于任何情况。

建议？

Answer 1

如果没有 css，我无法重现您的进度条。您应该尝试添加属性 text-align:center;在主 div 内部的 div 上，例如:

<div class="progress-bar progress-bar-success" style="width: 35%;text-align:center;">

试试这个，如果有效请告诉我