フォントのすばらしい入力チェックボックスをラベルに垂直に配置するにはどうすればよいですか？

Question

私はデフォルトのチェックボックスの代わりにfont-awesomeを使用していますが、それらはラベルと垂直に整列していません。チェックボックス自体を動かさずに、ラベルを垂直に並べたり、ラベルを配置するにはどうしたらいいですか？私はラベルと垂直方向にその中心軸に沿って整列する]チェックボックスを希望：http://codepen.io/3chordme/pen/pbRwgQ

EDITで

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"; } 

Codepen。 {vertical-align：middle}スタイルをラベルに追加することはできません。ラベルの相対的な配置は、テキストとチェックボックスを移動します。チェックボックスやテキストのフォントサイズを変更することはできません。

Answer 1

はvertical-align: middle;に.checkbox緑+ラベルを追加します。前に、それらが縦に並んでいる

Answer 2

vertical-align: middle;をラベル要素に追加します。 それは、アイテムを互いの中央に置くことを指示します。

Answer 3

あなたがセンターに配置したいと思うなら、あなたはこのようなことをする必要があります。注：私は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"; } 

Answer 4

CSSちょうどlabel::before擬似セレクタに以下のプロパティを追加、それが垂直方向に整列します。

.checkbox-green + label::before{ 
    position:relative; 
    top:12px; 
}