Question

.wrapt{
display:grid;
grid-template-columns: 50% 50%;
background:gold;
}
.inplus{
	display:inline-block;
	vertical-align:middle;
	width:50px;
	margin-right:7px;
}
.radiowhat{
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}
.labelwhat{
	display:inline-block;
	vertical-align:middle;
	margin-left:3px;
}

<div class='wrapt'>
<div class='wrapta'>
<input type='text' class='inplus' id='inplus' autocomplete = 'off' placeholder = '+'>
<input type='radio' class='radiowhat'><label for='radiofolder' class='labelwhat'>folder</label>
&nbsp;&nbsp;
<input type='radio' class='radiowhat'><label for='radiofile' class = 'labelwhat'>file</label>
</div>
<div class='wraptb'></div>
</div>

为什么单选按钮没有垂直居中？

Answer 1

最简单的解决方法是将margin: 0px添加到.radiowhat类中。

.radiowhat {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin: 0px;
}

Chrome和Firefox用户代理会自动在无线电输入中添加边距，因此重置它们将解决问题。

Answer 2

也许尝试不对所有内容使用<div>元素，然后执行以下操作：

<input type='text' class='inplus' id='inplus' autocomplete = 'off' placeholder = '+'>
<input type='radio' class='radiowhat'><label for='radiofolder' class='labelwhat'>folder</label>
&nbsp;&nbsp;
<input type='radio' class='radiowhat'><label for='radiofile' class = 'labelwhat'>file</label>

在您的CSS中：

.radiowhat {
    display: inline-block;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: auto;
}

这将使您的单选按钮居中并使其响应。

无法将单选按钮垂直放置在中间

2 个答案: