垂直对齐 Bootstrap 单选按钮图像

Question

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

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

但是 radio image 不在 Price radio 部分的中心。

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

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。

垂直对齐 Bootstrap 单选按钮图像

Vertical Align Bootstrap Radio Button Image

html

css

radio

twitter-bootstrap