позиционирование пользовательский флажок значок

Question

Я сделал пользовательский флажок с css. Для отмеченного значка я использую значки материала Google. Теперь единственная проблема заключается в том, что значок не вертикально центрирован. Как мне это сделать?

HTML:

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

CSS:

/* Basic Styling 
----------------------------------------------------------------------------------------------------*/ 

input[type="radio"], 
input[type="checkbox"] { 
    display: none; 
} 

input[type="radio"] + label, 
input[type="checkbox"] + label { 
    margin-right: 20px; 
    padding-left: 30px; 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
} 

input[type="radio"] + label:before, 
input[type="checkbox"] + label:before, 
input[type="radio"] + label:after, 
input[type="checkbox"] + label:after { 
    width: 20px; 
    height: 20px; 
    content: ''; 
    top: 0; 
    left: 0; 
    color: #fafafa; 
    text-align: center; 
    position: absolute; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
     -o-transition: all 0.2s ease-in-out; 
      transition: all 0.2s ease-in-out; 
} 

/* Radios 
----------------------------------------------------------------------------------------------------*/ 

input[type="radio"] + label:before { 
    border: 1px solid #eee; 
    border-radius: 50%; 
    box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #fafafa; 
} 

input[type="radio"] + label:hover:before { 
    border: 1px solid #eee; 
    border-radius: 50%; 
    box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #eee; 
} 

input[type="radio"]:checked + label:before { 
    border: 1px solid #2196F3; 
    border-radius: 50%; 
    box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #2196F3; 
} 

/* Checkboxes 
----------------------------------------------------------------------------------------------------*/ 

input[type="checkbox"] + label:before { 
    font-family: 'Material Icons'; 
    font-size: 18px; 
    content: '\E876'; 
    border: 1px solid #eee; 
    border-radius: 2px; 
    background: #fafafa; 
} 

input[type="checkbox"] + label:hover:before { 
    color: #eee; 
} 

input[type="checkbox"]:checked + label:before { 
    color: #2196F3; 
} 

Вот как это выглядит:

Answer 1

Есть несколько способов сделать это, но, на мой взгляд, , лучшим решением является CSS с вертикальным выравниванием Свойство.

Обязательное чтение на 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/