Centering elements in custom radio button label - html

Question

I'm using Bootstrap 3 and trying to center a radio button, an icon, and some text and am having no luck.
My form simply is simply stuffing everything inside a label tag which seems to be a lot.
The skeleton code I started with is below:
<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>
Here's the JS fiddle:
http://jsfiddle.net/4zh28rcn/4/
I'm tempted to try something like Flexbox but am wary of importing more third party libraries.
Thanks for any helpful pointers!

Answer 1

I'm not sure where it's coming from, but you appear to have a stray alignment pushing the <input> 20px to the left of where it ought to be.
If you add the CSS below to what you have in your fiddle already, you will see the radio buttons, the icon images and the text all centered and all lined up:
.radio-inline {
width: 100px;
padding: 0;
text-align: center;
}
input {
display: block;
position: relative;
left: 20px;
width: 100%;
}