動畫元素位置中間中心

Question

我在Chrome中遇到了此代碼的問題。當你點擊該複選框文本/複選框改變位置/填充/保證金的東西.. :(

http://jsfiddle.net/k5tswhsx/

HTML

<input id="inp" type="checkbox" /> 
<div id="cb" class="inp_checkbox"></div> 
Test 

JS

function init_checkbox(input_id, check_id){ 
    var input = $('#'+input_id), checkbox = $('#'+check_id).html('<div></div>'), options = { 
     duration : 200 
    }; 

    checkbox.click(function(){ 
     input.prop('checked', !input.prop('checked')).focus().change(); 
    }), inner = $('<div></div>').appendTo(checkbox.find('div:first')); 

    input.focus(function(){ 
     checkbox.addClass('focus'); 
    }) 
    .blur(function(){ 
     checkbox.removeClass('focus'); 
    }) 
    .change(function(){ 
     if(input.prop('checked')){ 
      inner.animate({ 
       height : 10, 
       width : 10 
      }, options); 
     } 
     else{ 
      inner.animate({ 
       height : 0, 
       width : 0 
      }, options); 
     } 
    }); 
} 

init_checkbox('inp', 'cb'); 

CSS

input[type=checkbox] { 
    display:none; 
} 
.inp_checkbox { 
    background:#fff; 
    border:1px solid #919191; 
    border-radius:1px; 
    transition:all 0.3s ease 0s; 
    box-shadow:0 1px 3px rgba(0,0,0,0.1); 
} 
.inp_checkbox.focus { 
    border-color:#007fff !important; 
    box-shadow:0 0 0 2px #007fff, 0 0 4px rgba(255,255,255,0.6); 
} 
.inp_checkbox { 
    display:inline-block; 
} 
.inp_checkbox > div { 
    display:flex; 
    cursor:pointer; 
    padding:1px; 
    height:18px; 
    width:18px; 
} 
.inp_checkbox > div > div { 
    background:#424242; 
    height:0; 
    width:0; 
    margin:auto; 
    border-radius:1px; 
} 

Answer 1

將「測試」包裹在span標籤中。將float:left添加到輸入和span標籤。

FIDDLE

HTML

<input id="inp" type="checkbox" /> 
<div id="cb" class="inp_checkbox"></div> 
<span>Test</span> 

CSS

span{ 
    float: left; 
} 
.inp_checkbox { 
    float: left; 
} 

Answer 2

浮法您的DIV：

.inp_checkbox > div { 
    display:flex; 
    cursor:pointer; 
    padding:1px; 
    height:18px; 
    width:18px; 
    float:left; 
} 

如果你也想中心的文字，把它放在一個容器以及和位置它line-height;