[英]How can I vertically align a font-awesome input checkbox with its label?
我在使用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上的 Codepen
編輯:我希望標簽和復選框沿其中心軸垂直對齊。 向標簽添加樣式{vertical-align:middle}無效。 標簽的相對位置將移動文本和復選框。 不能更改復選框或文本的字體大小。
添加vertical-align: middle;
到.checkbox-green + label:在此之前
假設您想將它們居中,則需要執行以下操作。 注意我不是CSS向導,因此這可能不是理想的解決方案。
的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";
position: relative;
top: 8px;
}
.checkbox-green:hover + label:before { color: $brand_green--dark; }
.checkbox-green:checked + label:before { content: "\f046"; }
添加vertical-align: middle;
標簽元素。 它說該項目放置在彼此中間。
只需label::before
偽選擇器label::before
將以下屬性添加到label::before
,它將垂直對齊。
.checkbox-green + label::before{
position:relative;
top:12px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.