如何水平對齊 td 內的 div？

Question

如圖所示，東西有點亂，可能是因為它在 td 里面。 有可能這樣做嗎？

 <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

您可以嘗試刪除td 、 p 、 button的默認 Bootstrap 填充和邊距，然后嘗試：

td {
    padding: 0;
    margin: 0;
}

Answer 2

您可以通過添加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>