ProgressBar.js 中圆圈内的文本不会在我的 CSS Grid 单元格内正确居中

Posted 2023-03-05

【中文标题】ProgressBar.js 中圆圈内的文本不会在我的 CSS Grid 单元格内正确居中

【英文标题】：The text inside the circle from ProgressBar.js won't center correctly inside my CSS Grid cell

【发布时间】：2021-04-09 15:45:01

【问题描述】：

完整的工作代码在这里。

https://codepen.io/chen-luke/pen/gOweWKE

我的 CSS 网格由两列组成

    .grid-template-areas:
        "name name"
        "rate diff_rate"
        "ratePie w-t-a"
        "help help"
        ". r-link";

在我的 ratePie 单元格中，我放置了我的进度圈。圆圈会正确显示，但圆圈中的文本“4/5”不会。我该怎么做才能使文本在圆心对齐？

【参考方案1】：

从text: 配置参数中删除autoStyleContainer: false。或者，删除整个 text: 参数，因为它变得未使用。

通过包含该设置，您告诉 ProgressBar 您想要自己设置 <p> 标记的样式 - 您实际上从未这样做过。

默认文本样式旨在完全满足您的需求。