在实现自定义复选框时,我遇到了图像旁边的垂直对齐单行和双行文本的问题,该模式使用一种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上看到相同内容。
答案 0 :(得分:0)
我试过这个http://jsfiddle.net/StartStep/79T6d/2/
SEE ON JSFIDDLE http://jsfiddle.net/StartStep/79T6d/2/