垂直中心 带有语义 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;
}

杰斯宾

适当的方法是重写整个css并使用flexbox。