垂直对齐输入和背景图像的标签

Question

我不必隐藏自己的复选框，但隐藏了CSS属性width：0px和opacity：0 [为了验证]。

我怎么能垂直对齐的背景图像和文本

看起来是这样的（假设checkboxbgimage作为在CSS设置为下标跨度的背景图像）

checkboxbgimage Lorem存有悲坐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 .. !!!!

Answer 1

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