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

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/

我很想尝试一些类似Flexbox的东西，但对导入更多的第三方库非常谨慎。

谢谢你提供的任何有用的建议！

Answer 1

我不知道它是从哪里来的，但是你似乎有一条偏离方向，把<input> 20px推到了它应该在的地方的左边。

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

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

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