我已经看过关于这个问题的不同的问题,但是找不到任何工作,由于我的标记的限制。
我的标记看起来像这样(不幸的是,这是由一些后端生成,我无法更改标记)。
<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>
我需要该复选框在右侧,垂直居中在< li>
目前,它的样式为:
li input{ display: inline-block; float: right; margin-right: 10px; }
我已经尝试使用垂直对齐的各种值,但这似乎没有帮助。此外,在一些情况下,标签可以非常长并且跨越多个线。当li的高度是任意的时,复选框仍然需要能够垂直居中。
我如何实现这一目标?
解决方法
垂直对齐仅适用于内联元素。如果你浮动它,那么我不认为它被视为内联元素流的一部分。
使标签成为行内块,并在标签和输入上使用垂直对齐以对齐其中间。然后,假设可以在标签和复选框上有一个特定的宽度,使用相对定位而不是浮动来交换它们(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; }