vertically aligning input with label having background image

I don't have to hide my Checkbox but hidden it with giving CSS properties width:0px and opacity:0[for sake of validation].

How can i vertical align the background image and text

Looks like this(Assume checkboxbgimage as an background-image which is set in CSS for span under label)

checkboxbgimage Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Expected:

The text should not wrap under the checkboxbgimage. The next line should start parallel to the line above it.

Here is the mark up:

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;
}

Thanks in adavance..!!!!

---

html addition - wrap label text in a 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 addition

.testDiv {
  display:flex;
}

.testDiv label {
  display:flex;
}

http://codepen.io/anon/pen/qbVwva

链接地址: http://www.djcxy.com/p/75542.html

上一篇: 在使用vw字体大小时避免单词中断

下一篇: 将输入与具有背景图像的标签垂直对齐