时间戳

首页 > 解决方案 > ProgressBar.js 中圆圈内的文本不会在我的 CSS Grid 单元格内正确居中

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

问题描述

完整的工作代码在这里。

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”不会。我该怎么做才能将文本对齐在圆圈的中心？

标签： javascripthtmlalignmentcss-grid

解决方案

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

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

默认文本样式旨在完全按照您的意愿行事。

推荐阅读