带语义的垂直居中无线电输入-ui

Question

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

我尝试使用Semantic Header作为标签内容来Radio input，但是radio不是垂直中间的行！

对 css 进行一些更改后，我将收音机置于线的中间，但收音机圆圈内的黑点（显示选择了哪个收音机）位置错误！

这是我解决这个问题但没有成功的工作：

.field label {
  display: flex !important;
}

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

Link 到 jsbin

对于这种情况，也许有更好的解决办法！

Answer 1

快速解决方案：

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

适当的方法是 re-write 整个 css 并使用 flexbox.

Vertical center Radio input with Semantic-ui