Line up these custom checkboxes and labels

Question

The CSS styled these spans to be the same height as the containing label, 2vw

input[type="checkbox"] + label {
        margin:0 auto;
        padding:0;
        padding-left:3vw;
        height:2vw;
        line-height:2vw;
}
input[type="checkbox"] + label span {
        background:lime;
        color:lime;
        position:absolute;
        margin-left:-3vw;
        text-align:center;
        width:2vw;
        height:2vw;
}

But they are clearly not.

Also, the span is not vertically centered.

What is missing in order to make the spans both the same height as and vertically centered within the containing labels?

Fiddle you this : http://jsfiddle.net/zLU8r/

Answer 1

After a long period of research and reflection it appears

This answer works

Give the span a display: inline-block; and vertical-alignment can work.