垂直对齐复选框

Question

我已经查看了有关此问题的不同问题,但由于我的标记限制而无法找到任何可行的问题.

我的标记看起来像是这样(不幸的是,这是由一些后端生成的,我无法更改标记).

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

我尝试过使用各种值vertical-align,但这似乎没有帮助.此外,在某些情况下,标签可能非常长并且跨越多条线.当li的高度是任意的时,复选框仍然需要能够垂直居中.

我怎样才能实现这一目标？

Answer 1

垂直对齐仅适用于内联元素.如果你浮动它,那么我认为它不再被视为内联元素流的一部分.

使标签成为内联块,并在标签和输入上使用垂直对齐以对齐其中间.然后,假设标签和复选框上有特定的宽度是可以的,使用相对定位而不是浮动交换它们(jsFiddle演示):

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

它不是一个完美的解决方案,但一个很好的解决方法.

您需要将元素指定为表格 display: table-cell

解决方案:^演示

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