Half Ratings display are broken when text-align: center

[lorisdev]

Current Behavior 😯

When a text-align: centerapplies on a Rating component with half rating visible, the display of the half rating is broken

Expected Behavior 🤔

The half rating should preserve the same expected display as when text-align: left

Steps to Reproduce 🕹

Codesandbox reproduction :
https://codesandbox.io/s/delicate-hooks-ggn5z

Relevant code to reproduce the bug :

<Box textAlign="center">
        <Rating readOnly value={4.5} precision={0.5} />
</Box>

Context 🔦

I am trying to display Rating in a context where text-align: center is active

Your Environment 🌎

Tech	Version
Material-UI	v4.9.5
React	16.13.0
Browser	Chrome v80.0.3987.132

[mlizchap]

I'd like to give this a shot if that's OK