Checkbox alignment in Internet Explorer, Firefox and Chrome
- by Andrej
Checkbox alignment with its label (i.e., vertical centering) cross different web browsers makes me crazy. Pasted below is standard html code:
<label for="ch"><input id="ch" type="checkbox">My Checkbox</label>
I tested different CSS tricks (e.g., link 1, link 2); most solutions works fine in FF, but are completely off in Chrome or IE8.
I'm looking for any references or pointers to solve this issue. Thanks in advance.
EDIT
According to Elq suggestion I modified the HTML
<div class="row">
<input type="checkbox" id="ch1" />
<label for="ch1">Test</label>
</div>
and CSS
.row{
display: table-row;
}
label{
display: table-cell;
vertical-align: middle;
}
Works now in Firefox, Internet Explorer 8, and Chrome on Windows. Fails on Firefox and Chrome on Linux. Also works in Firefox and Safari on Mac, but fails on Chrome.
