Html 将多个栏中的文本居中放置在同一个栏中。进度

进度条的代码为：

<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>

35%完成（成功）
完成20%（警告）
完成10%（危险）

我想写一篇文章，把它放在那些堆叠的进度条的中心

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

---

建议

没有css，我无法复制你的进度条。您应该尝试添加属性文本align:center；在您的div的主div内部，例如：

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

---

试试这个，让我知道它是否有效，只需将每个进度条设为一个div（就像您已经有的那样），然后将文本包装在该div内，并使文本对齐：居中

CSS

HTML

你好，世界！
35%完成（成功）
完成20%（警告）
完成10%（危险）

我可能误解了。但我认为您希望文本在整个进度条中居中，而不是像其他建议一样在每个单独的“部分”中居中？是的，我希望在整个进度条中居中：-）进度条已经有文本对齐：居中；应用于班级。如果他希望文本在每个堆叠条中居中（与完整的“进度”div相反），那么他只需删除class=“sr only”

.progress-info { 
    position: absolute;
    width: 100%;
    text-align: center;
}

<div class="progress">
  <div class="progress-info">Hello, World!</div>
  <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>