在程式化的复选框下设置标签

Question

基于this 我用很棒的字体设计了我的复选框。但我想将标签置于复选框下方的中心。我见过几个经典复选框的解决方案，但我不明白在这种情况下该怎么做。

HTML:

<div>
  <input id="box1" type="checkbox" class="bus"/>
  <label for="box1">Checkbox 1</label>
  <input id="box2" type="checkbox" />
  <label for="box2">Checkbox 2</label>
  <input id="box3" type="checkbox" />
  <label for="box3">Checkbox 3</label>
</div>

CSS:

/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f18d"; } /*

checked icon */
input.bus[type=checkbox]:checked + label:before { content: "\f080"; color: red} 
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

知道怎么做吗？

Answer 1

你应该把标签分成::before个元素和<span>里面：

<label for="box1"><span>Checkbox 1</span></label>

然后将 ::before 元素视为要放置在标签内的普通元素，例如：

/* label position */
input[type=checkbox] + label {
  position: relative;
  display: inline-block
}
input[type=checkbox] + label:before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -10px;
}

请注意，复选框已使用此技巧水平居中，仅更改了轴：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

JSFiddle（不包括 FontAwesome，但你有感觉）： https://jsfiddle.net/aojt0vh0/

在程式化的复选框下设置标签

Set label under a stylized checkbox

css

css-selectors

font-awesome