MDL-Ausrichtungsschalter mit seinem Etikett

Question

Wie in der folgenden Abbildung gezeigt, stimmt mein MDL-Schalter nicht mit seinem Etikett überein. Die Zentrierungstechniken, die ich versucht habe, hatten keine Wirkung. Es sind dies:

• margin: 0 auto
• display: inline-block mit text-align: center auf dem übergeordneten
• <div class="mdl-layout-spacer"></div> auf jeder Seite der Form

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

Answer 1

Ich fand, dass ich die display platziert der falsche Punkt, um den Schalter in das Formular einzufügen. Das Formular selbst benötigt display: inline-block;, um die Schaltsymbole in das Formular selbst zu ziehen. Von dort aus können Sie mit anderen Änderungen die Ausrichtung so anpassen, wie Sie es möchten.

Codepen mit linker und mittlerer Ausrichtung, Kommentar, wenn Sie die richtige Ausrichtung herausfinden können: https://codepen.io/MrNakaan/pen/OXGJwk