自定义复选框实现中的垂直文本对齐

Question

在实现自定义复选框时，我遇到了图像旁边的垂直对齐单行和双行文本的问题，该模式使用一种css样式模仿复选框。

请参阅此image中描述的情况。

我使用vertical-aling，display: inline-block和line-height玩了很多，解决方案只针对单行文字 工作 只有两行以上的文字。最后，我发现display: table和display: table-cell可以达到行为。但我的样本对此解决方案并不满意。

还有其他方法可以达到相同的行为吗？

以下是要播放的示例html：

<div class="block">
    <label class="checkbox">
        <input class="input" type="checkbox">
        <span class="image"></span>
        <span class="text">Some text</span>
    </label>
</div>
<div class="block">
    <label class="checkbox">
        <input class="input" type="checkbox">
        <span class="image"></span>
        <span class="text">Some very very very <br> very very very long text</span>
    </label>
</div>

这是display: table-cell样式解决方案：

.block {
    margin-top: 10px
}
.checkbox {
    display: table;
}
.checkbox .input {
    display: none;
}
.image {
    background: red;
    width: 35px;
    height: 35px;
    display: table-cell; 
    vertical-align: middle;
}
.text {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
}

在fiddler上看到相同内容。

Answer 1

我试过这个http://jsfiddle.net/StartStep/79T6d/2/

SEE ON JSFIDDLE http://jsfiddle.net/StartStep/79T6d/2/