如何实现等宽进度条标签并使进度条垂直居中对齐？

我完全懂你的困扰——用inline-block加固定宽度确实能把进度条推到右边，但垂直对齐总是差那么点意思，对吧？给你推荐两种靠谱的解决方案，优先用Flexbox，省心又高效：

方案一：Flexbox布局（推荐） #

Flexbox天生就是为这种对齐和空间分配场景设计的，能同时搞定垂直居中和进度条右推两个需求：

HTML结构示例 #

<div class="progress-wrapper">
  <span class="progress-label">项目完成度：</span>
  <div class="first-bar">
    <div class="progress-fill" style="width: 65%"></div>
  </div>
</div>

CSS样式 #

.progress-wrapper {
  display: flex;
  align-items: center; /* 让所有子元素垂直居中 */
  /* 可选：给容器加个宽度，避免进度条太宽 */
  width: 400px;
  gap: 10px; /* 文本和进度条之间的间距，按需调整 */
}

.first-bar {
  flex: 1; /* 让进度条占据剩余所有空间，也可以设固定宽度比如200px */
  height: 14px;
  background-color: #e0e0e0;
  border-radius: 7px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #2196F3;
}

如果想让进度条固定宽度而不是占满剩余空间，把.first-bar的flex:1换成width: 200px就行，它依然会被推到右边，同时保持垂直居中。

方案二：Inline-block + 垂直对齐（兼容旧浏览器） #

如果需要兼容非常老的浏览器，可以用inline-block配合vertical-align: middle解决：

.progress-wrapper {
  /* 确保容器的行高和进度条高度一致，辅助垂直对齐 */
  line-height: 14px;
}

.progress-label {
  display: inline-block;
  vertical-align: middle;
}

.first-bar {
  display: inline-block;
  width: 200px;
  height: 14px;
  background-color: #e0e0e0;
  vertical-align: middle;
  /* 用margin-left把进度条推到右边 */
  margin-left: calc(100% - 200px - 80px); /* 80px是文本的大概宽度，按需调整 */
}

不过这种方法需要手动计算间距，不如Flexbox灵活，所以优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者Randy Goldsmith