定位自定义复选框图标答案

【问题标题】：positioning custom checkbox icon定位自定义复选框图标
【发布时间】：2015-11-17 19:23:18
【问题描述】：

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

这是它的样子：

【问题讨论】：

只要使复选框标签的行高与复选框本身的高度匹配即可。
谢谢，工作正常:)

标签： css checkbox

【解决方案1】：

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

THIS 链接必读。

【讨论】：

【解决方案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/

【讨论】：