CircularProgressbarWithChildren does not center children

[cdosborn]

🐛 Bug report

Summary of issue

I was able to correctly center text by setting the svg's root style display: block. I learned that the default display is inline. This causes the svg to have an expanded height that is greater than its set height to account for descenders in text that can appear alongside it. The absolute positioned children would be centered in the expanded height as opposed to the svg's visual height.

[kevinsqi]

hmm, that's unexpected - you shouldn't need to set the svg to have display: block in order to center text. Could you please add the following detail to this issue?

• What browser version you're on
• Create a Codesandbox example that reproduces the issue you're having, and take a screenshot of the non-centered text.

[vitorsilvalima]

it is not being centralised correctly as mention by @cdosborn

[kevinsqi]

Okay, thanks for the screenshot @vitorsilvalima - I think see the issue. My mistake for not noticing it earlier - the reason I didn't see it is because I always include bootstrap 4 CSS in my demo apps, which includes a "reboot" file that contains the following declaration:

svg {
  vertical-align: 'middle';
}

Adding that should fix the centering issue. So to work around the issue temporarily, you could add this style to the root svg element:

<CircularProgressbarWithChildren
  value={20}
  styles={{
    root: {
      verticalAlign: "middle"
    }
  }}
>
  <div>...some children...</div>
</CircularProgressbarWithChildren>

This Codesandbox demonstrates the issue and shows this workaround fix: https://codesandbox.io/s/i086m

I'll also include a proper fix in the next release so you don't have to use this workaround, which I'll try to push out soon.

[kevinsqi]

This should now be fixed in v2.0.1 - thanks @cdosborn and @vitorsilvalima for reporting the issue! Let me know if you have any further issues.