我使用 font-awesome 代替默认复选框,它们没有垂直对齐它们的标签。如何在不移动复选框本身的情况下垂直对齐它们或定位标签?
HTML
<div class="row">
<input type="checkbox" class="checkbox-green" id="authorized">
<label for="authorized">I am authorized to work in the United States.</label>
</div>
<div class="row margin-top-12">
<input type="checkbox" class="checkbox-green" id="drugs">
<label for="drugs">I am not currently using illegal drugs.</label>
</div>
<div class="row margin-top-12">
<input type="checkbox" class="checkbox-green" id="felony">
<label for="felony">I have not been convicted of a felony. </label>
</div>
CSS
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.checkbox-green { display: none; }
.checkbox-green + label:before {
font-family: FontAwesome;
font-size: 34px;
width: 50px;
color: $brand_green;
display: inline-block;
cursor: pointer;
content: "\f096";
}
.checkbox-green:hover + label:before { color: $brand_green--dark; }
.checkbox-green:checked + label:before { content: "\f046"; }
代码笔在 http://codepen.io/3chordme/pen/pbRwgQ
编辑:我希望标签和复选框沿它们的中心轴垂直对齐。将样式 { vertical-align: middle } 添加到标签不起作用。标签的相对定位会移动文本和复选框。不能更改复选框或文本的字体大小。
最佳答案
将 vertical-align: middle;
添加到 .checkbox-green + label:before 就是这样
关于html - 如何垂直对齐字体超棒的输入复选框及其标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38021331/