Html 输入复选框检查位置不正确

我用css3创建了一个自定义的复选框，结果是它看起来像这样，并且复选框比应该的位置稍微低一些

以下是适用于此复选框的html代码：

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

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;
}

有没有办法把支票移到箱子的中央？

demo-

设置

行高

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

---

您好，这是您的代码吗？lol 1秒，我想我也应该添加包含flexbox内容的容器^ ^我在您的代码中没有看到任何标签css。张贴正确的代码。请提供演示。您必须将其更改为非白色的颜色。然而，@Derek，请提供一把小提琴来说明你的问题，因为我把颜色改成黑色后，所有的东西看起来都对齐了。@Vitorino Fernandes，如果你去掉线条高度，它看起来也对齐了？？它稍微在底部@Manjunathsidapaon mine它没有。。这是因为我没有提供合适的演示，但如果您感兴趣，请尝试一下：jsfiddle.net/wv8ksqgL/4no，不是吗？？只是你需要改变颜色？？？@Vitorino Fernandes