输入复选框检查不合适的位置

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/

设置line-height

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