html - 中心进度条说明

Question

我正在寻找一种始终居中的进度条描述的方法。我在面板的标题中有一个进度条，用于通知用户有关面板内容的信息。

问题:描述总是在进度条的左侧(成功部分)。

我想要的是描述总是在栏的中心，像这样:

请看下面我的尝试:

.inline .in {
    display: inline-block;
    margin: 0 10px;
}

.panel .inline .progress {
    top: 7px;
    position: relative;
    margin-left: 10%;
    background-color: red;
}

.panel .progress {
    width: 40%;
    border-radius: 0;
}

.panel-heading-btn {
    float: right;
}

.panel-title {
    line-height: 20px;
    font-size: 12px;
}

.panel-heading {
    padding: 10px 15px;
    border: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="container">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-heading-btn">
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
      </div>
      <div class="inline">
        <h4>Panel Heading</h4>

        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:50%">
        50 / 100 available                          </div>
        </div>
        
        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:10%">
        10 / 100 available                          </div>
        </div>
        
        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:90%">
        90 / 100 available                          </div>
        </div>
      </div>
    </div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>

Answer 1

您需要的是独立于整个进度条构造的东西。 float ，宽度。

一种方法是将描述放在它自己的元素中并绝对定位。

.inline .in {
  display: inline-block;
  margin: 0 10px;
}

.panel .inline .progress {
  top: 7px;
  position: relative;
  margin-left: 10%;
  background-color: red;
}

.panel .progress {
  width: 40%;
  border-radius: 0;
}

.panel-heading-btn {
  float: right;
}

.panel-title {
  line-height: 20px;
  font-size: 12px;
}

.panel-heading {
  padding: 10px 15px;
  border: none;
}

.progress-description {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  text-align: center
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="container">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-heading-btn">
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
      </div>
      <div class="inline">
        <h4>Panel Heading</h4>

        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:50%">
            <span class="progress-description">50 / 100 available</span> </div>
        </div>

        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:10%">
            <span class="progress-description">10 / 100 available</span> </div>
        </div>

        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:90%">
            <span class="progress-description">90 / 100 available</span> </div>
        </div>
      </div>
    </div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>