how to align divs inside a td horizontally?

Question

as shown in the image,things are deranged a bit, maybe its because its inside a td. is it possible to do that?

 <td>
    <div class="col"> 
       <div class="input-group text-center">                           
                <div class="input-group-btn">
                     <button class="btn btn-primary" type="submit" id="button-minus"> - </button>
                </div>

                <input type="text" class="form-control" value="1" size="1">

                <div class="input-group-btn">
                    <button class="btn btn-primary" type="submit" id="button-plus"> + </button>
                </div>
                                                
                                      
         </div> <!-- input-group.// --> 
      </div> <!-- Col.// -->
  </td>

Answer 1

You can place the buttons and form on the same line by adding display: inline-flex to .input-group

.input-group {display: inline-flex}

 <td>
    <div class="col"> 
       <div class="input-group text-center">                           
                <div class="input-group-btn">
                     <button class="btn btn-primary" type="submit" id="button-minus"> - </button>
                </div>

                <input type="text" class="form-control" value="1" size="1">

                <div class="input-group-btn">
                    <button class="btn btn-primary" type="submit" id="button-plus"> + </button>
                </div>
                                                
                                      
         </div> <!-- input-group.// --> 
      </div> <!-- Col.// -->
  </td>

Answer 2

You might try to remove the default Bootstrap padding and margin for td, p, button and try :

td {
    padding: 0;
    margin: 0;
}