垂直对齐引导单选按钮图像

Question

我正在尝试将input-group-addon与radio元素结合起来。 示例代码如下。

http://www.bootply.com/1M34c3sy29

但radio图像不在价格radio部分的中心。

是否可以将价格部分的图像居中？ 或者您是否为此类演示推荐另一种解决方案。

Answer 1

Bootstrap 正在添加一些样式，这些样式不允许您根据需要与 function 垂直对齐。 元素是绝对定位的。 我会尝试以另一种方式定位单选按钮，使用top的 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 属性：

 .input-group { display:inline-block;} #inlineradio2{ top: 13px; }

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <form class="form-horizontal"> <fieldset> <div class="form-group"> <div class="col-lg-12"> <div class="radio"> <label> <input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio"> Automatic. Price will be set by the system </label> </div> <div class="radio"> <label> <input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio"> <div class="input-group"> <span class="input-group-addon">Price</span> <input type="text" class="form-control" placeholder="" id="price-box" aria-describedby="Price"> </div>< -- /input-group --> </label> </div> </div> </div> </fieldset> </form>

我还更改了相关单选按钮上的 HTML id属性的名称，因为id应该是唯一的。