html - 输入复选框 checkout 位置

我使用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;
}

有什么方法可以将支票移动到盒子的中央吗？

最佳答案

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

设置line-height

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

关于html - 输入复选框 checkout 位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27009180/