收音机和复选框的垂直对齐与bootstrap 4 beta 3

Question

我正在尝试使用最新版本的bootstrap（v4 beta 3）在输入的顶部（和居中）放置一个收音机/复选框的文本。像这样：

但似乎收音机/复选框本身分为两部分：.custom-control-label::before和.custom-control-label::after我无法弄清楚如何移动输入或文本来实现该行为

PS如果您想尝试

，这是plunker

Answer 1

由于您正在使用Bootstrap，因此需要覆盖这些伪元素的定位

这应该足够了：

.custom-control-label::before,
.custom-control-label::after {
  top: 1.5rem;
  left: calc(50% - -.25rem)
}

plunker

编辑

要考虑多线标签，您可以执行以下操作：

.custom-control-label {
  display: flex;
  flex-direction: column-reverse;
  align-items: center
}

.custom-control-label::before,
.custom-control-label::after {
  position: relative;
  order: 0;
}

.custom-control-label::after {
  order: -1;
  /* height of the ::after element */
  transform: translateY(-1rem);
}