定位自定义复选框图标

Question

我用css制作了一个自定义复选框。对于选中的图标，我使用Google的素材图标。现在唯一的问题是图标不是垂直居中的。我该怎么做？

HTML：

source = (User
          .select(User.username, fn.COUNT(Tweet.id))
          .join(Tweet, JOIN.LEFT_OUTER)
          .group_by(User.username))
UserTweetDenorm.insert_from(
    [UserTweetDenorm.username, UserTweetDenorm.num_tweets],
    source).execute()

CSS：

<input type="checkbox" id="remember">
<label for="remember">Angemeldet bleiben</label>

这是它的样子：

Answer 1

有几种方法可以做到这一点，但在我看来，最好的解决方案是 CSS vertical-align Property 。

THIS链接上的必读内容。

Answer 2

使用line-height属性。

    input[type="radio"] + label:before,
    input[type="checkbox"] + label:before,
    input[type="radio"] + label:after,
    input[type="checkbox"] + label:after {line-height: 19px;}

演示：http://jsfiddle.net/k3zLj0w4/