将输入与具有背景图像的标签垂直对齐
我不必隐藏我的复选框，但隐藏了CSS属性的宽度：0px和opacity：0 [为了验证]。
我如何垂直对齐背景图像和文字
看起来像这样（假设checkboxbgimage作为背景图像，在CSS中为跨度标签设置）
checkboxbgimage Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore。
预期：
该文本不应该包装在checkboxbgimage下。 下一行应该与它上面的行平行开始。
这是标记：
HTML
<div class="testDiv">
<input type="checkbox" id="checkboxtest">
<label for ="checkboxtest"><span></span>Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</label>
</div>
CSS
.testDiv>input{
width:0px;
opacity:0;
}
.testDiv input[type="checkbox"] + label span{
background: rgba(0, 0, 0, 0) url("http://oi59.tinypic.com/i5ngoj.jpg") no-repeat scroll -6px -481px;
cursor: pointer;
display: inline-block;
height: 25px;
margin-right: 5px;
position: relative;
vertical-align: middle;
width: 30px;
}
.testDiv input[type="checkbox"]:checked + label span{
background: rgba(0, 0, 0, 0) url("http://oi59.tinypic.com/i5ngoj.jpg") no-repeat scroll -20px -450px;
}
感谢adavance .. !!!!
html添加 - 在div中包装标签文本
<label for ="checkboxtest">
<span></span>
<div>
Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore
</div>
</label>
CSS另外
.testDiv {
display:flex;
}
.testDiv label {
display:flex;
}
http://codepen.io/anon/pen/qbVwva
链接地址: http://www.djcxy.com/p/75541.html上一篇: vertically aligning input with label having background image