【问题标题】: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;
`;

This is what the progress bar currently looks like

【问题讨论】:

    标签: css reactjs visual-studio-code progress-bar


    【解决方案1】:

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-11-10
      • 2023-04-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-01-31
      • 1970-01-01
      相关资源
      最近更新 更多