问题将复选框与多行标签对齐

看到 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>

如何对齐顶部，底部和中间的复选框？

我会用另一个容器并使用定位来做，但有更简单的方法吗？

9962

2018-05-22 15:42

起源

答案:

你只需要使用 vertical-align 物业 <label> 本身

http://jsbin.com/oloxes/1/edit （我指定了一个值 top 在这个例子中）

2018-05-22 15:44

谢谢，我还不了解那个属性。 - juanpastas

仅当您可以使用固定宽度时，此功能才有效。它一般不能解决问题。 - PointedEars

答案:

你只需要使用 vertical-align 物业 <label> 本身

http://jsbin.com/oloxes/1/edit （我指定了一个值 top 在这个例子中）

2018-05-22 15:44

谢谢，我还不了解那个属性。 - juanpastas

仅当您可以使用固定宽度时，此功能才有效。它一般不能解决问题。 - PointedEars

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

2017-10-14 14:56

问题 将复选框与多行标签对齐

答案:

答案:

热门问题

问题将复选框与多行标签对齐