自定义复选框，对齐标签中间答案

【问题标题】：Custom checkboxes, aligning label middle自定义复选框，对齐标签中间
【发布时间】：2018-02-20 11:36:23
【问题描述】：

我在将标签与复选框中间对齐时遇到问题。我已经尝试了所有看起来的方法，经过数小时的测试，我终于放弃了。

我已经用display: inline-block, vertical-align: middle; 进行了测试，但似乎没有任何效果。然而，我发现将字符放入 content:'' 会使文本浮动到顶部。

我想我错过了什么......

.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.styled-checkbox + label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  width: 28px;
  height: 28px;
  background: #cad1d9;
  border-radius: 3px;
}
.styled-checkbox:hover + label:before {
  background: #f35429;
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
  background: #f35429;
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0px;
  background: white;
  width: 3px;
  height: 3px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label>

【问题讨论】：

标签： html css checkbox label text-align

【解决方案1】：

在:before选择器中添加vertical-align: middle并在:after中设置顶部位置

.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.styled-checkbox + label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  width: 28px;
  height: 28px;
  background: #cad1d9;
  border-radius: 3px;
  vertical-align: middle;
}
.styled-checkbox:hover + label:before {
  background: #f35429;
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
  background: #f35429;
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 3px;
  height: 3px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label>

【讨论】：