bug(MatRadioButton): ripple elemnt floats to the right if inside a text-align: center

[Gunyon]

Steps to reproduce:
https://stackblitz.com/edit/angular-62kuk6?file=src/app/radio-overview-example.html

Expected Behavior

What behavior were you expecting to see?

Position ripple element to the center.

Actual Behavior

What behavior did you actually see?

Ripple element is floating to right.

Solution

.mat-ripple-element {
left: 0;
}

Environment

• Angular: 11.0.3
• CDK/Material: 11.0.3
• Browser(s): Chrome Version 89.0.4389.114 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}