如何让React Bootstrap ProgressBar的标签始终居中？

问题原因 #

默认情况下，React-Bootstrap的ProgressBar组件会将label属性的内容渲染在progress-bar元素内部，标签位置会随着进度条宽度（now属性值）变化而偏移，无法保持固定居中。

解决方法 #

将标签从进度条内部抽离，通过绝对定位让它相对于外层进度容器居中：

1. 调整组件结构 #

不再使用ProgressBar内置的label属性，手动在外层容器中添加独立的标签元素：

<div className="custom-progress-wrapper">
  <ProgressBar now={你的进度值} className="progress-bar" />
  <span className="center-label">{你的标签内容}</span>
</div>

2. 添加自定义样式 #

通过CSS设置容器相对定位，标签绝对定位实现居中：

.custom-progress-wrapper {
  position: relative;
  /* 可根据需求调整进度条高度 */
  height: 1.5rem;
}

.center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 基于自身尺寸居中 */
  transform: translate(-50%, -50%);
  /* 根据进度条背景调整文字颜色 */
  color: #fff;
  font-size: 0.875rem;
  /* 防止标签遮挡进度条交互 */
  pointer-events: none;
}

3. 可选：保留无障碍属性 #

为确保组件无障碍性，给ProgressBar补充必要的aria属性，同时给标签添加aria-hidden="true"（进度条已通过aria-valuenow等属性提供进度信息）：

<div className="custom-progress-wrapper">
  <ProgressBar 
    now={40} 
    aria-valuemin={0} 
    aria-valuemax={100}
    className="progress-bar" 
  />
  <span className="center-label" aria-hidden="true">40%</span>
</div>

效果说明 #

通过这种方式，标签会始终固定在进度条的中心位置，完全不受进度值变化的影响。

内容的提问来源于stack exchange，提问作者Guilherme Rodriguero