Bootstrap form elements not aligned in horizontal form

Question

I Have a horizontal modal form defined similarly to:

<div id="formElements" class="modal-body form-horizontal">
    <div id="catTemplate" class="form-group" style="display:none">
         <div class="controls col-sm-1">
              <a href="javascript:;"><span class="glyphicon glyphicon-minus"></span></a>
         </div>
         <div class="controls col-sm-7">
              <input class="form-control" placeholder="Category">
         </div>
         <div class="controls col-xm-3">
              <input class="form-control" type="number" min="0" max="100" style="width:100px;" placeholder="Weight %">
         </div>
    </div>
</div>  

But my link floats a little bit above the horizontal line of the other form elements. I attached a screenshot. Is there a way to properly align them?

Answer 1

You can use line-height See this link

Or you can use this one too