Vertical align checkbox using absolute positoning

by audetwebdesign

HTML

<div class="wrap">
    <input class="control" type="checkbox" name="theCheckbox" id="checkboxId">
    <div class="label">A
        <br/>B
        <br/>C
        <br/>D</div>
</div>

CSS

.wrap {
    border: 1px dotted gray;
    position: relative;
    overflow: auto; /* triggers hasLayout in IE7 */
}
.control {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.label {
    margin-left: 20px;
}