Html 带有输入字段的中央单选按钮

我有一些自定义单选按钮。最后一个选项应该是带有输入字段的单选按钮。 如您所见，在de Codepen示例中，单选按钮没有与输入字段垂直居中对齐。 我尝试了从计算top到显示flex的所有方法

代码笔：

有电梯吗？
对
不

好吧，对于您的情况，一个快速修复方法是覆盖自定义单选按钮的当前最高值，并将其设置为

25%

（因为它的实际高度是您输入的

50%

，所以

25%

将正好位于中间）。另外，请注意，父元素上的display flex不会像预期的那样工作，因为自定义的无线电存在于

：：before

中，因此它不会获得flex属性

.custom控件标签[for=monthsOther]：：之前，
.自定义控件标签[for=monthsOther]：：之后{
最高：25%；
}

多少个月？
1-2
3-5

这似乎是一种改变表单元素外观的非常粗糙的方法。最初的问题是缺少任何CSS代码（这是所有问题产生的地方），但链接的代码笔确实显示了根本原因。正确对齐绝对定位的元素将非常困难，特别是当您开始考虑从左到右或更大的字体大小时。此外，在标签内部使用

：：before

创建单选按钮的视觉表示是一种令人沮丧的方法，最终也是一种糟糕的解决方案

---

正确的解决方案可能是在收音机和标签上同时使用

垂直对齐：中间

或

垂直对齐：基线

。但是，当元素完全定位时，这些将没有效果。

在本例中添加此CSS

.form-group:nth-child(4) .custom-control-label:after, .form-group:nth-child(4) .custom- control-label:before{
 margin-top: 0.5em
}

我用你的密码笔把解决方案寄给你

---

我正在使用bootstrap 4.5及其自定义字段。因此，如果它是'黑客'，我会留下来的引导开发人员。我试过使用flex和垂直对齐，但正如您所提到的，它使用：：before和：：after伪元素来设置单选按钮的样式。让我疯狂的是单选按钮的视觉效果来自标签，而不是单选按钮元素本身。如果没有引导，单选按钮在字体大小增加时不会变大。使用bootstrap，它们的大小会增加，但位置并不一致。如果您最终编写了大量自定义代码来处理这些正常情况，那么除了不必要的战斗之外，我不确定您从框架中得到了什么。还有一点奇怪，文本框位于label元素内部；它甚至不能在chrome中正常工作；收音机没有被选中，但点击后会突出显示。不过我不知道这有什么不对。即使是材料设计也使用相同的原则：可能是引导中的错误或错误，它们没有正确对齐。将文本框放在标签元素中是为了使其与我在生产中更改的单选按钮保持一致；我认为他们是在竭尽全力，让我个人和专业人士都觉得客观上是糟糕的设计，无论是视觉上还是实用上。围绕输入控件的web样式设计肯定有一个弱点。或者，您可以按照自己认为合适的方式制作自己的Web组件，而不必在输入控件的约束范围内工作；但是，如果你想将可访问性和其他东西结合起来，你将承担一项艰巨的任务。我明白了。谢谢你的信息。我会尝试一些其他的解决方案，甚至可能会给它自己的类，以便能够定位最后一个选项的单选按钮。这就是我要说的！感谢您的示例和帮助。当您更改字体大小时（尽管其他行也是如此），这会出现问题

.form-group:nth-child(4) .custom-control-label:after, .form-group:nth-child(4) .custom- control-label:before{
 margin-top: 0.5em
}