CSS 垂直对齐复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9815328/
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
Vertically aligning a checkbox
提问by F21
I have looked at the different questions regarding this issue, but couldn't find anything that works due to limitations in my markup.
我查看了有关此问题的不同问题，但由于我的标记限制，找不到任何可行的方法。
My markup looks like so (unfortunately as this is generated by some backend, I am unable to change the markup).
我的标记看起来像这样（不幸的是，这是由某个后端生成的，我无法更改标记）。
<ul>
<li>
<input type="checkbox" value="1" name="test[]" id="myid1">
<label for="myid1">label1</label>
</li>
<li>
<input type="checkbox" value="2" name="test[]" id="myid2">
<label for="myid2">label1</label>
</li>
</ul>
I need the checkbox to be on the right and centered vertically in the <li>
我需要复选框在右侧并垂直居中 <li>
Currently, this is styled as:
目前，这被设计为：
li input{
display: inline-block;
float: right;
margin-right: 10px;
}
I have tried using various values for vertical-align, but that doesn't seem to help. Also, in some cases the label can be very long and span multiple lines. The checkbox would still need to be able to vertically center itself when the height of the li is arbitrary.
我曾尝试为 使用各种值vertical-align，但这似乎无济于事。此外，在某些情况下，标签可能很长并跨越多行。当 li 的高度是任意的时，复选框仍然需要能够垂直居中。
How can I go about achieving this?
我怎样才能做到这一点？
回答by Supr
Vertical alignment only works on inline elements. If you float it, then I don't think it is treated as part of that stream of inline elements any more.
垂直对齐仅适用于行内元素。如果您浮动它，那么我认为它不再被视为该内联元素流的一部分。
Make the label an inline-block, and use vertical alignment on both the label and the input to align their middles. Then, assuming it is okay to have a specific width on the labels and checkboxes, use relative positioning instead of floating to swap them (jsFiddle demo):
使标签成为内联块，并在标签和输入上使用垂直对齐来对齐它们的中间。然后，假设可以在标签和复选框上设置特定宽度，使用相对定位而不是浮动来交换它们（jsFiddle 演示）：
input {
width: 20px;
position: relative;
left: 200px;
vertical-align: middle;
}
label {
width: 200px;
position: relative;
left: -20px;
display: inline-block;
vertical-align: middle;
}
回答by Starx
Its not a perfect solution, but a good workaround.
它不是一个完美的解决方案，而是一个很好的解决方法。
You need to assign your elements to behave as table with display: table-cell
您需要将元素分配为表 display: table-cell
Solution: Demo
解决方案：演示
HTML:
HTML：
<ul>
<li>
<div><input type="checkbox" value="1" name="test[]" id="myid1"></div>
<div><label for="myid1">label1</label></div>
</li>
<li>
<div><input type="checkbox" value="2" name="test[]" id="myid2"></div>
<div><label for="myid2">label2</label></div>
</li>
</ul>
CSS:
CSS：
li div { display: table-cell; vertical-align: middle; }
回答by Timothy Gonzalez
<div>
<input type="checkbox">
<img src="/image.png" />
</div>
input[type="checkbox"]
{
margin-top: -50%;
vertical-align: middle;
}
回答by retiredcoder
This works reliably for me. Cell borders and height added for effect and clarity:
这对我来说可靠。为了效果和清晰度添加了单元格边框和高度：
<table>
<tr>
<td style="text-align:right; border: thin solid; height:50px">Some label:</td>
<td style="border: thin solid;">
<input type="checkbox" checked="checked" id="chk1" style="cursor:pointer; "><label for="chk1" style="margin-top:auto; margin-left:5px; margin-bottom:auto; cursor:pointer;">Check Me</label>
</td>
</tr>
</table>回答by jonathana
The most effective solution that I found is to define the parent element with display:flexand align-items:center
我发现的最有效的解决方案是使用display:flex和定义父元素align-items:center
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.myclass{
display:flex;
align-items:center;
background-color:grey;
color:#fff;
height:50px;
}
</style>
</head>
<body>
<div class="myclass">
<input type="checkbox">
<label>do you love Ananas?
</label>
</div>
</body>
</html>
OUTPUT:
输出：
回答by Sundaram Seth
Add CSS:
li {
display: table-row;
}
li div {
display: table-cell;
vertical-align: middle;
}
.check{
width:20px;
}
ul{
list-style: none;
}
<ul>
<li>
<div><label for="myid1">Subject1</label></div>
<div class="check"><input type="checkbox" value="1"name="subject" class="subject-list" id="myid1"></div>
</li>
<li>
<div><label for="myid2">Subject2</label></div>
<div class="check" ><input type="checkbox" value="2" class="subject-list" name="subjct" id="myid2"></div>
</li>
</ul>回答by u1984295
make input to block and float, Adjust margin top value.
输入块和浮动，调整边距顶部值。
HTML:
HTML：
<div class="label">
<input type="checkbox" name="test" /> luke..
</div>
CSS:
CSS：
/*
change margin-top, if your line-height is different.
*/
input[type=checkbox]{
height:18px;
width:18px;
padding:0;
margin-top:5px;
display:block;
float:left;
}
.label{
border:1px solid red;
}
