Vertically aligning a checkbox

Question

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

Answer 1

Its not a perfect solution, but a good workaround.

You need to assign your elements to behave as table with display: table-cell

Solution: ^Demo

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