标签分为两行时的垂直对齐标签和复选框

Question

有复选框，一切看起来都不错，但是当标签文字换成两行时，我无法强制我的复选框与标签中间对齐。它保持在最顶层。 jsFiddle

现在看起来如何：

预期结果：

HTML：

<input type="checkbox" id="c1" name="1" />
<label value="1" for="c1"><span></span>Lorem ipsum lorem ipsum</label>
<input type="checkbox" id="c2" name="2" />
<label value="2" for="c2"><span></span>Lorem ipsum lorem ipsum lorem ipsum 2</label>

CSS：

  body
{
    min-height:100%;
    width:100%;
    line-height: 1;
    font-family: 'Roboto', sans-serif;
    font-size:1em;
    display:table;
}   
input[type="checkbox"] {
       display:none;
   }
   input[type="checkbox"] + label span {
       display:inline-block;
       width:19px;
       height:19px;
       margin:-1px 8px 0 0;
       vertical-align:middle;
       background:url(http://oi59.tinypic.com/i5ngoj.jpg) left top no-repeat;
       float:left;
       cursor:pointer;
   }
   input[type="checkbox"]:checked + label span {
       background:url(http://oi59.tinypic.com/i5ngoj.jpg) -19px top no-repeat;
   }
   input[type="checkbox"]:checked + label {
       border: 1px #99cc00 solid;
       font-weight: 500;
   }
   label, .toggle {
       font-weight:300;
       margin-bottom:10px;
       padding:12px;
       display:block;
       max-width:100%;
       background-color:#fff;
       color:#4c4c4c;
       -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
       border-radius: 3px;
       -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
       -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
       box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
   }

Answer 1

更新 - 更好的答案

在标签上显示背景图像。我将未经检查和检查的图像拆分为单独的文件。

Have a fiddle!

HTML

<input type="checkbox" id="c1" />
<label for="c1">This is my label</label>

CSS

input[type=checkbox] {
    display: none
}
label {
    display: block;
    width: 100px;
    background: url(http://i.imgur.com/KwNXcwW.gif) left center no-repeat;
    padding: 0 0 0 28px;
    margin: 20px 0 0;
    cursor: pointer;
}
input:checked + label {
    background: url(http://i.imgur.com/4Zp4dZ0.gif) left center no-repeat;
}

---

旧答案

如果不更换复选框，display: table和display: table-cell;就可以正常使用。

在这个例子中，我没有用图像替换复选框以保持简单。

Have a fiddle!

HTML

<div>
    <input type="checkbox" id="c1" name="1" />
    <label value="1" for="c1">Lorem ipsum</label>
</div>

CSS

div {
    display: table;
    margin: 10px 0;
}
div input {
    display: table-cell;
    vertical-align: middle;
     width: 40px;
    height: 100%;
}
div label {
    display: table-cell;
    vertical-align: middle;
     width: 180px;
        padding: 3px 0 0;
}