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

时间:2014-04-18 13:52:50

标签: css checkbox custom-controls vertical-alignment

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

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

我使用vertical-alingdisplay: inline-blockline-height玩了很多,解决方案只针对单行文字 工作 只有两行以上的文字。最后,我发现display: tabledisplay: 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上看到相同内容。

1 个答案:

答案 0 :(得分:0)

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

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