提问人：Guilherme Rodriguero 提问时间：11/18/2023 最后编辑：Guilherme Rodriguero 更新时间：11/21/2023 访问量：50
是否可以将 React Bootsrap ProgressBar 的标签居中？
Is it possible to center the React Bootsrap ProgressBar's label?
问：
我正在使用 React-Bootsrap ProgressBar，我注意到该组件根据其值对齐其标签： progress-bar 示例
我想知道是否可以将标签居中，而不管其值如何，如下所示：（随机示例）
我的组件：
<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>
我尝试设置进度和进度条类的样式，但我无法设置内部文本的样式
答：
1赞
saidtechnology
11/18/2023
#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%);
}
评论
0赞
Guilherme Rodriguero
11/18/2023
感谢您的回答，但它对我不起作用:(我应用了 css 样式，但它仍然像第一张图片......我在：“react-bootstrap”：“^2.7.2”
0赞
Guilherme Rodriguero
11/22/2023
在研究和测试了这段代码之后，我注意到为什么对我不起作用。React-Bootstrap 的 ProgressBar 呈现：<div class=“......progress-bar-wrapper progress“> <div class=”progress-bar“>dummy</div> </div> 这就是为什么它不适用于我的情况，因为第一个 div（样式所在的位置）没有任何数据标签属性（除了”class“之外，也没有任何其他属性）。label 属性确实存在于组件上，但它没有被重新定义，因此 CSS 上的 attr（） 函数不返回任何内容
评论