具有Semantic-ui的垂直中心无线电输入

Question

我使用Sematic-ui为网页设置样式，在我有收音机输入的页面中，但我不想要一个简单的文字标签！

我尝试使用Semantic Header作为Radio输入的标签内容，但收音机不是垂直的中间线！

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