Question

我试图降低bootstrap的进度条的高度，但问题是如何在中心垂直方向上与它旁边的文本相同。您可以看到下面的示例，其高度减小的进度条在其下方具有边距或空白区域。

＆＃13;

.progress-num {
  float: left;
  margin-right: 1em;
}

.progress {
    height: 0.5em !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <table class="table">
    <tr>
      <td>
        <span class="progress-num">8/10</span>
        <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
          <span class="sr-only"></span>
        </div>
      </div>
      </td>
    </tr>
  </table>

＆＃13;

Answer 1

或者只是将文本和条形图包含在包含元素中：

<table class="table">
  <tr>
    <td>
      <div class="progress-stuff">
        <span class="progress-num">8/10</span>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
            <span class="sr-only"></span>
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>

CSS（边缘不需要魔术数字）：

.progress-stuff {
  display: flex;
  align-items: center; /* ensure all elements vertically aligned */
}

.progress-num {
  margin-right: 1rem;
}

.progress {
  flex: 1; /* ensure bar fills remaining horizontal space */
}

Answer 2

只需使用margin-top

进行设置即可

.progress-num {
  float: left;
  margin-right: 1em;
}

.progress {
    height: 0.5em !important;
    margin-top: 7px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <table class="table">
    <tr>
      <td>
        <span class="progress-num">8/10</span>
        <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
          <span class="sr-only"></span>
        </div>
      </div>
      </td>
    </tr>
  </table>

垂直对齐中心文本以及进度条

2 个答案: