Vertical center Semantic-uiでのラジオ入力

Question

Sematic-uiを使用して、Webページのスタイルを設定しています。ページにラジオ入力がありますが、単純なテキストラベルは必要ありません。

ラジオ入力のラベル内容としてセマンティックヘッダーを使用しようとしましたが、ラジオはラインの垂直中央ではありません！

私はラジオをラインの途中に置いていますが、ラジオサークル内の黒い点（ラジオが選択されていることを示しています）が間違った位置になります！

ここでは成功せずにこの問題を解決についての私の仕事です：

.field label { 
    display: flex !important; 
} 

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

リンク

jsbinには、たぶん、このような状況のためのよりよい解決策があります！

Answer 1

クイックソリューション：

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

Jsbin

適切な方法は、全体のCSSを再書き込みとflexboxを使用することです。