React-Circular-Progressbar 中的文本未居中答案

【问题标题】：Text in React-Circular-Progressbar not centeredReact-Circular-Progressbar 中的文本未居中
【发布时间】：2021-12-28 00:29:32
【问题描述】：

当我创建一个圆形进度条时，我正在努力让文本居中。

这是添加进度条和文本的代码。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：