カスタムラジオボタンのラベルに要素を配置する

Question

私はブートストラップ3を使用しています。ラジオボタン、アイコン、およびテキストを中央に配置しようとしています。

私のフォームは単に、ラベルタグの中にすべてのものを詰め込んでいます。これはたくさんあるようです。

私が始めたスケルトンコードは以下の通りです：ここでは

<form role="form"> 
      <label class="radio-inline"> 
       <input type="radio" name="optradio"> 
       <br/> 
       <div class="iconOne"></div> 
       <br/> 
       Option 1 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="optradio"> 
       <br/> 
       <div class="iconTwo"></div> 
       <br/> 
       Option 2 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="optradio"> 
       <br/> 
       <div class="iconThree"></div> 
       <br/> 
       Icon Three 
      </label> 
     </form> 

JSフィドルです：

http://jsfiddle.net/4zh28rcn/4/

私はフレキシボックスのような何かをしようとする誘惑が、より多くの第三のインポートを警戒していますよが、パーティーライブラリ。

ありがとうございました！

Answer 1

どこから来ているのかわかりませんが、どこにあるべきか左に<input>20pxを押しています。

あなたはすでにあなたのフィドルに持っているものには、以下のCSSを追加する場合は、すべての中心とすべてが並んでラジオボタン、アイコン画像とテキストが表示されます。

.radio-inline { 
width: 100px; 
padding: 0; 
text-align: center; 
} 

input { 
display: block; 
position: relative; 
left: 20px; 
width: 100%; 
}