Совместите эти пользовательские флажки и метки

Question

CSS стилизовал эти промежутки так, чтобы они были такой же высоты, как и метка, 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;
}

Но они явно нет.

Кроме того, диапазон не центрирован по вертикали.

Чего не хватает для того, чтобы отрезки имели одинаковую высоту и вертикально центрировались внутри содержащих ярлыков?

Поиграй с этим: http://jsfiddle.net/zLU8r/

Answer 1

После долгого периода исследований и размышлений

Этот ответ работает

Дайте промежуток display: inline-block; и вертикальное выравнивание может работать.