Vertically aligning a checkbox
Solution 1:
Vertical alignment only works on inline elements. If you float it, then I don't think it is treated as part of that stream of inline elements any more.
Make the label an inline-block, and use vertical alignment on both the label and the input to align their middles. Then, assuming it is okay to have a specific width on the labels and checkboxes, use relative positioning instead of floating to swap them (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;
}
Solution 2:
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; }
Solution 3:
The most effective solution that I found is to define the parent element with display:flex and align-items:center
LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.myclass{
display:flex;
align-items:center;
background-color:grey;
color:#fff;
height:50px;
}
</style>
</head>
<body>
<div class="myclass">
<input type="checkbox">
<label>do you love Ananas?
</label>
</div>
</body>
</html>
OUTPUT:
