Html 将复选框与多行标签对齐

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16696103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:41:50  来源:igfitidea点击:

Align checkbox with a multi line label

htmlcss

提问by sites

See http://jsbin.com/ocutob/1/edit

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>

How can align the checkbox at the: top, bottom and middle?

如何对齐复选框:顶部、底部和中间?

I would do it with another container and using positioning, but is there a simpler way?

我会用另一个容器并使用定位来做,但有没有更简单的方法?

回答by adrift

You just need to use the vertical-alignproperty on the <label>itself

您只需要vertical-align在其<label>本身上使用该属性

http://jsbin.com/oloxes/1/edit(I specified a value of topin this example)

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

回答by Thomas Landauer

Answer for 2015:
Since vertical-aligndoesn't work for me (or not anymore), here's how I do it:

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>

See http://jsfiddle.net/8jzss08p/
Works in: Firefox 41, Chrome 45, Internet Explorer 11

请参阅http://jsfiddle.net/8jzss08p/
适用于:Firefox 41、Chrome 45、Internet Explorer 11