Vertical Align Bootstrap Radio Button Изображение

Question

Я пытаюсь совместить input-group-addon с элементами radio. Ниже приведен пример кода.

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

Но radioизображения не по центру для Цены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> 
 
\t \t <input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio"> 
 
\t \t <div class="input-group"> 
 
\t \t \t <span class="input-group-addon">Price</span> 
 
\t \t \t <input type="text" class="form-control" placeholder="" id="price-box" aria-describedby="Price"> 
 
\t \t </div><!-- /input-group --> 
 
\t </label> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</fieldset> 
 
</form>

Я также изменил имя атрибута HTML id по переключателю в вопросе, как the id should be unique ,