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

Question

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

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

但是radio 图像 没有以价格 radio 部分居中。

是否可以将 Price 部分的图像居中？或者您是否为此类演示推荐其他解决方案。

Answer 1

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

.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 属性的名称更改为 the id should be unique。