见http://jsbin.com/ocutob/1/edit
<span>
<input checked="checked" type="checkbox" value="1">
<label>test test test test test test test test test test test test </label>
</span>
如何对齐复选框：顶部，底部和中间？
我会用另一个容器并使用定位来做到这一点，但有没有更简单的方法？
问问题
28893 次
2 回答
17
您只需要在其自身上使用该vertical-align属性<label>
http://jsbin.com/oloxes/1/edittop （我在这个例子中指定了一个值）
于 2013-05-22T15:44:03.653 回答
7
2015 年的答案：
由于vertical-align对我不起作用（或不再适用），我是这样做的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radiobutton labels aligned</title>
<style type="text/css">
div { display:table-row; }
div span { display:table-cell; vertical-align:middle; } /* You can omit the entire span if you don't want the radiobutton vertically centered */
div label { display:table-cell; }
</style>
</head>
<body>
<form>
<div>
<span><input type="checkbox" id="a"></span>
<label for="a">First button's label<br>First button's label</label>
</div>
<div>
<span><input type="checkbox" id="b"></span>
<label for="b">Second button's label</label>
</div>
<input type="checkbox" id="c"><label for="c">For comparison: Standard-Label</label>
</form>
</body>
</html>
请参阅http://jsfiddle.net/8jzss08p/
适用于：Firefox 41、Chrome 45、Internet Explorer 11
于 2015-10-14T14:56:29.087 回答