Выключатель MDL с его меткой

Question

Как показано на рисунке ниже, мой переключатель MDL не совпадает с его меткой. Методы центрирования, которые я пробовал, не имели никакого эффекта. К ним относятся:

• margin: 0 auto
• display: inline-block с text-align: center на материнской
• <div class="mdl-layout-spacer"></div> по обе стороны от формы

Codepen: https://codepen.io/MrNakaan/pen/mEgdvX

Answer 1

я обнаружил, что я поместил display в неправильное место, чтобы заставить коммутатор вписаться в форму. Сама форма нуждается в display: inline-block;, чтобы вытащить значки переключателей в форму. Оттуда другие изменения могут получить выравнивание так, как вы хотите.

Codepen с левым и центральным выравниванием, комментарий, если вы можете выяснить выравнивание вправо: https://codepen.io/MrNakaan/pen/OXGJwk