This is one of the minor CSS problems that plagues me constantly. How do folks around Stack Overflow vertically align checkboxes
and
I think this is the easiest way
input {
position: relative;
top: 1px;
}
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
<form>
input[type=checkbox]
{
vertical-align: middle;
}
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>
<form>
<div>
<label style="display: inline-block">
<input style="vertical-align: middle" type="checkbox" />
<span style="vertical-align: middle">Label text</span>
</label>
</div>
</form>
The trick is to use vertical-align only in table cells or inline-block if using label tag.
The chosen answer with 400+ upvotes did not work for me in Chrome 28 OSX, probably because it wasn't tested in OSX or that it did work in whatever was around in 2008 when this question was answered.
The times have changed, and new CSS3 solutions are now feasible. My solution uses pseudoelements to create a custom checkbox. So the stipulations (pros or cons, however you look at it) are as follows:
div.checkbox {
position: relative;
font-family: Arial;
font-size: 13px;
}
label {
position: relative;
padding-left: 16px;
}
label::before {
content :"";
display: inline-block;
width: 10px;
height: 10px;
background-color: white;
border: solid 1px #9C9C9C;
position: absolute;
top: 1px;
left: 0px;
}
label::after {
content:"";
width: 8px;
height: 8px;
background-color: #666666;
position: absolute;
left: 2px;
top: 3px;
display: none;
}
input[type=checkbox] {
visibility: hidden;
position: absolute;
}
input[type=checkbox]:checked + label::after {
display: block;
}
input[type=checkbox]:active + label::before {
background-color: #DDDDDD;
}
<form>
<div class="checkbox">
<input id="check_me" type=checkbox />
<label for="check_me">Label for checkbox</label>
</div>
</form>
This solution hides the checkbox, and adds and styles pseudoelements to the label to create the visible checkbox. Because the label is tied to the hidden checkbox, the input field will still get updated and the value will be submitted with the form.
And if you're interested, here's my take on radio buttons: http://jsfiddle.net/DtKrV/2/
Hope someone finds this useful!
If you're using Twitter Bootstrap, you can just use the checkbox
class on the <label>
:
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
The only perfectly working solution for me is:
input[type=checkbox], input[type=radio] {
vertical-align: -2px;
margin: 0;
padding: 0;
}
Tested today in Chrome, Firefox, Opera, IE 7 and 8. Example: Fiddle