анимированный элемент позиция средний центр

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;