垂直對齊輸入和背景圖像的標籤

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