合わせラベルが

Question

は私が、私はラベルを揃えることができる方法、38px

input[type=radio] { 
 
    visibility: hidden; 
 
} 
 

 
.label { 
 
    font-weight: normal; 
 
    color: #333; 
 
} 
 

 
.label::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 38px; 
 
    height: 38px; 
 
    border: 1px solid #727272; 
 
    border-radius: 50%; 
 
} 
 

 
input[type=radio]:checked+label:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 38px; 
 
    height: 38px; 
 
    left: 0; 
 
    background: #0065bd; 
 
    border: none; 
 
    transform: scale(0.5); 
 
    border-radius: 50%; 
 
}

<div class="container"> 
 
    <input type="radio" id="radio1" value="on"> 
 
    <label for="radio1" class="label">Yes</label> 
 
</div>

ここ

がfiddleであることを大きな円を次のラジオボタンを必要としていますそれは中心に整列され、円の右側にプッシュされますか？

Answer 1

おそらく、あなたのコードは、上に複雑な事項です。入力を大きくしたい場合は、ラベルではなく入力にサイジングなどを集中させるべきでしょうか？

スニペットを参照してください（編集後、ラジオは青色に変わり、this codepenに適合しています。クリックする前はグレーで、中央から青く、中央からインデントしています）。

ちょっとした注意：デフォルト値を使用する場合（そしてオプションが1つしかない場合）、おそらくカスタムチェックボックスが適切な選択肢になるでしょうか？ （ラジオボタンは、通常、ユーザーが2つ以上の選択肢を持つ場合に使用されますが、1つのみを選択できます）。単なる考えです。

input[type="radio"] { 
 
    display: none; 
 
    width: 38px; 
 
    height: 38px; 
 
    border: 1px solid #727272; 
 
} 
 

 
input[type="radio"]+label span { 
 
    display: inline-block; 
 
    width: 38px; 
 
    height: 38px; 
 
    margin: 9px; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    border-radius: 50%; 
 
    background-color: grey; 
 
} 
 

 
input[type="radio"]:checked+label span { 
 
    content=""; 
 
    background: #0065bd; 
 
} 
 

 
input[type="radio"]+label span, 
 
input[type="radio"]:checked+label span { 
 
    -webkit-transition: background-color 0.4s linear; 
 
    -o-transition: background-color 0.4s linear; 
 
    -moz-transition: background-color 0.4s linear; 
 
    transition: background-color 0.4s linear; 
 
}

<div class="container"> 
 
    <input type="radio" id="radio1" name="radio"> 
 
    <label for="radio1" class="label"><span></span>Yes</label> 
 

 
    <input type="radio" id="radio2" name="radio"> 
 
    <label for="radio2" class="label"><span></span>No</label> 
 
</div>

Answer 2

それが中心に持って.container{ line-height:38px}を追加

https://jsfiddle.net/8gubpzhq/

が右に移動する（それはすでに右にいたようですが）

.label { 
    font-weight: normal; 
    color: #333; 
    padding-left:5px;//add this line 
} 

https://jsfiddle.net/vszuu535/

にこれを追加します

Answer 3

には、line-height:40px;を追加して縦方向にセンタリングすることができます。右に移動する場合は、padding-left:20px;を追加してください（あなたのニーズに合わせてline-heightとpadding-leftを変更できます）。

input[type=radio] { 
 
    visibility: hidden; 
 
} 
 

 
.label { 
 
    font-weight: normal; 
 
    color: #333; 
 
    line-height:40px; 
 
    padding-left:20px; 
 
} 
 

 
.label::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 38px; 
 
    height: 38px; 
 
    border: 1px solid #727272; 
 
    border-radius: 50%; 
 
} 
 

 
input[type=radio]:checked + label:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 38px; 
 
    height: 38px; 
 
    left: 0; 
 
    background: #0065bd; 
 
    border: none; 
 
    transform: scale(0.5); 
 
    border-radius: 50%; 
 
}

<div class="container"> 
 
    <input type="radio" id="radio1" value="on"> 
 
    <label for="radio1" class="label">Yes</label> 
 
</div>