How to align checkboxes and their labels consistently cross-browsers

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

<style type="text/css">
label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
</style>

<style type="text/css">
.checkboxes label
{
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;
}

.checkboxes input
{
    vertical-align: middle;
}

.checkboxes label span
{
    vertical-align: middle;
}
</style>

<form>
    <div class="checkboxes">
        <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
        <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
        <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
    </div>
</form>

.checkboxes label
{
    display: block;
    float: left;
    padding-right: 10px;
    padding-left: 22px;
    text-indent: -22px;
}

<style type="text/css">
*
{
    padding: 0px;
    margin: 0px;
}
#wb
{
    width: 15px;
    height: 15px;
    float: left;
}
#somelabel
{
    float: left;
    padding-left: 3px;
}
</style>

<div>
<input id="wb" type="checkbox" /><label for="wb" id="somelabel">Web Browser</label>
</div>

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
  }
  input[type=radio] {
    bottom: 2px;
  }

<form>
   <div>
      <label><input type="checkbox" /> Label text</label>
   </div>
</form>

<style type="text/css">
label {
   line-height: 18px;
}
input {
   width: 13px;
   height: 18px;
   font-size: 12px;
   line-height: 12px;
}
</style>

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

<form>
    <div>
        <input id="blah" type="checkbox" /><label for="blah">Label text</label>
    </div>
</form>

fieldset{text-align:left;border:none}
  fieldset ol,fieldset ul{padding:0;list-style:none}
    fieldset li{padding-bottom:1.5em;float:none;clear:left}
      label{float:left;width:7em;margin-right:1em}
    fieldset.checkboxes li{clear:both;padding:.75em}
      fieldset.checkboxes label{margin:0 0 0 1em;width:20em}
      fieldset.checkboxes input{float:left}

<form>

  <fieldset class="checkboxes">

    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy"/>
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry"/>
        <label for="hungry">Hungry?</label>
      </li>
    </ul>

  </fieldset>

</form>

var label = ...
var input = document.getElementById(label.htmlFor);

Without using DIV and other  elements and fixed sizes.
We can "align checkboxlist text by Setting
 "**float:left**" to the checkbox list input type
 in Css

    Please check the following example code:
    ========================================

    .CheckboxList
    {

        font-size:14px;
        color:#333333;

    }
    .CheckboxList input
    {
        float:left;
        clear:both;
    }

    .Aspx Code:
    ===========

    <asp:CheckBoxList runat="server" ID="chlCities" RepeatColumns="2" CssClass="CheckboxList"></asp:CheckBoxList>

input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: top;
position: relative;
*top: 1px;
*overflow: hidden;
}
label {
display: block;
padding: 0;
padding-left: 15px;
text-indent: -15px;
border: 0px solid;
margin-left: 5px;
vertical-align: top;
}

<label for="id" class="checkbox">
  <input type="checkbox" id="id">
  <span>The Label</span>
</label>

label.checkbox { display: block; }
.checkbox input { float: left; height: 18px; vertical-align: middle; }
.checkbox span { float: left; line-height: 18px; margin: 0 0 0 20px; }

input {
  margin:0;
}

input { vertical-align: -2px }

input[type=checkbox], input[type=radio] {
  vertical-align: baseline;
  position: relative;
  top: 3px;
  margin: 0 3px 0 0;
  padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
  vertical-align: middle;
  position: static;
  margin-bottom: -2px;
  height: 13px;
  width: 13px;

$(document).ready(function() {
  if ($.browser.msie && $.browser.version <= 7) {
    $('input[type=checkbox]').addClass('ie7');
    $('input[type=radio]').addClass('ie7');
  }
});

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