How to vertical-align input box and label text?

Vertically aligning input box and the label that goes with it is quiet challenging especially when you have vertically align them on all browsers such as IE, Firefox, Chrome, Safari and Opera; and on all different versions on all available OSes. I had to work with multiple checkboxes in a single row with label attached to each input checkbox, and when I thought I've got it done; it worked all but on a Chrome running in Mac. This made me rework the whole thing again from scratch using display table CSS property.

For the sake of illustration, I am going to just align one input box with one label that goes with it. A standard HTML for displaying an input box, and a label look something like this:

<input id="male" type="checkbox"><label for="male">Male</label>

And, the rendered HTML look like this:

Male

<script type="text/css">
.row{
  display: table-row;
}

label{
  display: table-cell;
  vertical-align: middle;
}
</script>

<div class="row">
<input type="checkbox" id="male">
<label for="male">Male</label>
</div>