垂直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仍然需要能够垂直居中。

我怎么能做到这一点?

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

它不是一个完美的解决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; } 
 <div> <input type="checkbox"> <img src="/image.png" /> </div> 
 input[type="checkbox"] { margin-top: -50%; vertical-align: middle; } 

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

演示