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

Question

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

我尝试使用 Semantic Header 作为 Radio 输入的标签内容，但 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。