html - 输入复选框检查出位置

Question

我使用 css3 创建了一个自定义复选框，结果看起来像这样，其中的复选框略低于应有的位置...

这是适用于此复选框的 html 代码:

<div>
    <input id='remember_me' type='checkbox'>
    <label for='remember_me'>Remember me</label>
</div>

这是适用于此复选框的 css 代码:

input[type='checkbox'] + label:before {
    content: "";
    display: block;
    float: left;  
    width: 12px;  
    height: 12px;  
    margin-right: 4px;

    border: 1px solid white;
}
input[type='checkbox']:checked + label:before {
    content:'✓';
    color: white;
}
input[type='checkbox'] {
    display: none;
}
div {
    display: flex;
    align-items: center;
}

有什么办法可以把支票移到方框的中央吗？

Answer 1

演示 - http://jsfiddle.net/victor_007/wv8ksqgL/3/

设置行高

input[type='checkbox']:checked + label:before {
    content:'✓';
    color: blue;
    line-height: 14px;
}