css React-循环-进度条中的文本未居中

1wnzp6jl  于 2023-02-20  发布在  React
关注(0)|答案(4)|浏览(142)

当我创建一个圆形进度条时,我正在努力让文本居中。
这是添加进度条和文本的代码。

<div>
  <ProgressBar
     value={80}
     text="80%"
     strokeWidth={5}
     styles={buildStyles({trailColor:"red"})}
  />

这段代码是进度条的样式部分。是否可以将文本居中到进度条

const ProgressBar = styled(CircularProgressbar)`
    width: 100px;
    height: 100px;
`;

This is what the progress bar currently looks like

nmpmafwu

nmpmafwu1#

确保导入的是css文件。

import "react-circular-progressbar/dist/styles.css";
r55awzrz

r55awzrz2#

我相信我们可以在这里使用flex
在包含文本标记的容器上。您可以添加。

display: flex;
justify-content: center;
align-items: center;

只需确保文本是应用了我前面提到的flex样式的容器的直接子容器

qco9c6ql

qco9c6ql3#

唯一对我有效的方法就是变换x和y。

.CircularProgressbar-text {
    transform: translate(-15px, 5px);
}
ru9i0ody

ru9i0ody4#

更简洁的方法是在.CircularProgressbar-text上使用text-anchor属性和align-baseline属性。
示例:

.CircularProgressbar-text {
text-anchor: middle;
alignment-baseline: middle;
}

这将解决在进度条中间对齐文本的问题。

相关问题