Vertikale Mitte Radio Eingang mit Semantic-Ui

Question

Ich benutze Sematic-Ui, um eine Webseite zu stylen, in der Seite habe ich Radio-Eingang, aber ich will nicht nur ein einfaches Text-Label!

Ich versuche Semantic Header als Label-Inhalt zu Radio-Eingang zu verwenden, aber das Radio ist nicht vertikal in der Mitte der Linie!

Mit etwas Änderung auf css mache ich das Radio in der Mitte der Linie zu sein, aber der schwarze Punkt innerhalb des Radiokreises (das zeigen, welches Radio ausgewählt ist) falsche Position gehen!

Hier ist meine Arbeit über dieses Problem ohne Erfolg Lösung:

.field label { 
    display: flex !important; 
} 

.field label::before { 
    margin: auto 10px; 
    position: relative !important; 
} 

Link zu jsbin

Vielleicht ist es eine bessere Lösung für diese Situation!

Answer 1

Schnell Lösung:

.ui.radio.checkbox label:before, .ui.radio.checkbox label:after { 
    top: 20px; 
} 

Jsbin

Der geeignete Weg, um die gesamte CSS neu zu schreiben wäre und flexbox verwenden.