HTML/CSS中的单选/复选框对齐
将单选按钮/复选框与文本正确对齐的最简洁方法是什么？到目前为止，我使用的唯一可靠的解决方案是基于表的：
<table>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 1</td>
</tr>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 2</td>
</tr>
</table>这可能会引起一些人的不满。我刚刚花了一些时间(再次)研究了一个无表的解决方案，但失败了。我尝试了浮点数、绝对/相对定位和类似方法的各种组合。不仅因为它们主要依赖于估计的单选按钮/复选框的高度，而且它们在不同的浏览器中的行为也不同。理想情况下，我希望找到一个不假设任何大小或特殊浏览器怪癖的解决方案。我可以使用表，但是我想知道哪里还有其他的解决方案。
回答 12
Stack Overflow用户
发布于 2009-05-20 21:55:13
我想我终于解决了这个问题。一种常用的解决方案是使用vertical-align: align：
<input type="radio" style="vertical-align: middle"> Label然而，问题是，尽管理论上它应该是可行的，但它仍然会产生明显的错位。CSS2规范规定：
垂直对齐:中间：将长方体的垂直中点与父长方体的基线加上父长方体x高度的一半对齐。
所以它应该在完美的中心( x-height是字符x的高度)。然而，这个问题似乎是由于浏览器通常会在单选按钮和复选框中添加一些随机的、不均匀的边距造成的。例如，可以使用Firebug在火狐中检查默认的复选框边界是否为3px 3px 0px 5px。我不确定它是从哪里来的，但其他浏览器似乎也有类似的边际。因此，要获得完美的对齐，需要去掉这些边距：
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label有趣的是，在基于表的解决方案中，边距以某种方式被吃掉了，一切都很好地对齐了。
Stack Overflow用户
发布于 2008-12-28 18:35:44
下面的代码可以在Firefox和Opera中运行(抱歉，我目前无法访问其他浏览器)：
<div class="form-field">
<input id="option1" type="radio" name="opt"/>
<label for="option1">Option 1</label>
</div>CSS：
.form-field * {
vertical-align: middle;
}Stack Overflow用户
发布于 2010-10-28 23:02:15
我发现最好也是最简单的方法就是这样做，因为你不需要添加标签，div或者其他任何东西。
input { vertical-align: middle; margin-top: -1px;}
https://stackoverflow.com/questions/396439
复制相似问题
腾讯云开发者
