是否可以将React Bootsrap ProgressBar的标签居中？

Question

我正在使用 React-Bootsrap ProgressBar，我注意到该组件根据其值对齐其标签：

我想知道是否可以将标签居中，无论其值如何，如下所示：

我的组件：

<ProgressBar
    now={....}
    label={....}
    className={....}
/>

浏览器开发工具的结果：

<div class="..... progress">
    <div role="progressbar" class="progress-bar" aria-valuenow="40" aria-valuemin="0" aria-    valuemax="100">
        dummy
    </div>
</div>

我尝试设置进度和进度条类的样式，但无法设置其中文本的样式

Answer 1

是的，这是可能的，试试这个。

<ProgressBar 
now={60} 
label={`${60}%`}
className="progress-bar-wrapper"
/>

在 CSS 中

.progress-bar-wrapper {
  position: relative;
}

.progress-bar-wrapper::after {
  content: attr(data-label);
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}