垂直中心使用Semantic-UI的無線電輸入

Question

我使用Sematic-ui設計一個網頁，在頁面中我有無線電輸入，但我不想只是一個簡單的文本標籤！

我嘗試使用語義標題作爲標籤內容到廣播輸入，但廣播不是垂直線的中間！

隨着css的一些變化，我把收音機放在線的中間，但收音機圈內的黑點（這表明哪個收音機被選中）出錯位置！

這是我對沒有成功解決這一問題的工作：

.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。