将文本与进度条垂直对齐居中

Question

我试图降低引导进度条的高度，但问题是我怎样才能让它在中心与旁边的文本垂直相同的行。您可以看到下面的示例，其中包含一个降低高度的进度条，该进度条下方有一个类似边距或空白区域。

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

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

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>

Answer 3

您还可以在

进度条中嵌入文本，以防您不坚持高度为 0.5em .只需从内部span元素中删除类sr-only，然后将文本8/10移动到该元素。然后不需要调整文本，因为它将始终在进度条内。

如果您不想应用任何其他样式，您甚至可以完全省略内部span。我把它保留在我的代码片段中，因为它使代码更有条理：

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

在任何情况下，即使您将标签保留在进度条之外，也要用内容填充<span class="sr-only"></span>，例如 <span class="sr-only">8/10</span> .sr-only代表仅限屏幕阅读器，即有视觉障碍的访问者依赖于该元素中的文本！

即使你无法在屏幕上看到它，其他人也需要这些信息来判断动作的进展。