垂直alignmentcheckbox

我已经看了关于这个问题的不同的问题，但由于我的标记限制，找不到任何有用的问题。

我的标记看起来像这样（不幸的是，这是由一些后端生成的，我无法改变标记）。

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

我需要checkbox在右侧，并在<li>垂直居中

目前，这被称为：

 li input{ display: inline-block; float: right; margin-right: 10px; } 

我曾尝试使用vertical-align各种值，但似乎没有帮助。 而且，在某些情况下，标签可能很长，并且跨越多行。 当li的高度是任意的时，checkbox仍然需要能够垂直居中。

我怎么能做到这一点？

Answer 1

垂直alignment仅适用于内联元素。 如果你浮动它，那么我不认为它被视为内联元素stream的一部分。

使标签成为内嵌块，并在标签和input上使用垂直alignment来alignment其中间位置。 然后，假设可以在标签和checkbox上使用特定的宽度，可以使用相对定位而不是浮动来交换它们（ jsFiddle demo ）：

 input{ width:20px; position:relative; left: 200px; vertical-align:middle; } label{ width:200px; position:relative; left: -20px; display:inline-block; vertical-align:middle; } 

Answer 2

它不是一个完美的解决scheme，但一个很好的解决方法。

您需要将您的元素分配为具有display: table-cell

解决scheme： ^演示

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：

 li div { display: table-cell; vertical-align: middle; } 

Answer 3

 <div> <input type="checkbox"> <img src="/image.png" /> </div> 

 input[type="checkbox"] { margin-top: -50%; vertical-align: middle; } 

Answer 4

使input阻断浮动，调整余量最高值。

HTML：

 <div class="label"> <input type="checkbox" name="test" /> luke.. </div> 

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; } 

演示