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推到应该的位置左侧。< / p>

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

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

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

定制单选按钮标签中的中心元素

1 个答案: