Html 自定义单选按钮标签中的居中元素

我正在使用Bootstrap3，试图将一个单选按钮、一个图标和一些文本居中，但我运气不好

我的表格只是简单地把所有东西都塞进一个标签里，似乎很多

我开始使用的框架代码如下：

<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>

选择1




选择2




图标三

以下是JS小提琴：

我很想尝试像Flexbox这样的东西，但对导入更多的第三方库很谨慎

---

谢谢你的指点

我不确定它是从哪里来的，但你似乎有一个杂散的校准，将

20px
推到它应该在的左边

如果将下面的CSS添加到小提琴中已有的CSS中，您将看到单选按钮、图标图像和文本都居中排列：

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

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

Flexbox
（）是本机CSS3模块。这不是第三方图书馆。谢谢！我肯定从另一个文件中得到了一些被污染的CSS。