Центрирующие элементы на пользовательской кнопке с переключателем

Question

Я использую Bootstrap 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/

Я испытываю желание попробовать что-то вроде Flexbox, но я опасаться импорта более третьего партийных библиотек.

Спасибо за любые полезные указатели!

Answer 1

Я не уверен, откуда он исходит, но у вас, кажется, есть беспризорное выравнивание, нажимая <input>20px слева от того места, где оно должно быть.

Если добавить CSS ниже того, что вы имеете в своей скрипке уже, вы увидите кнопки радио, значок изображение и текст все центрированные и все выстроены:

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

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