라벨이 두 줄로 나뉘어지면 세로 맞춤 라벨과 체크 박스가 표시됩니다.

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