Vertical Align Bootstrap Radio Button Image

Question

I am trying to combine input-group-addon with radio elements. Example code is below.

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

But the radio image is not centered for Price radio section.

Is it possible to center the image for the Price section? Or do you recommend another solution for such kind of presentation.

Answer 1

Bootstrap is adding some styling that will not allow the vertical align to function as you need. The elements are absolutely positioned. I'd try positioning the radio button another way, using the top css property:

 .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>

I've also changed the name of the HTML id attribute on the radio button in question as the id should be unique .