如何在td标签内水平对齐div元素？

方法1：给td添加Bootstrap内置对齐类 #

直接给<td>加上text-center类，让td内的所有元素水平居中：

<td class="text-center">
    <div class="col"> 
       <div class="input-group">                           
                <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>

方法2：给col容器添加flex对齐类 #

如果不想让td内所有元素都居中，只针对col里的内容对齐，可以给col加上d-flex justify-content-center类（Bootstrap flex布局类）：

<td>
    <div class="col d-flex justify-content-center"> 
       <div class="input-group">                           
                <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>

方法3：自定义CSS控制对齐 #

如果上述Bootstrap类不适用，可以写自定义CSS来指定col容器的对齐方式：

td .col {
  display: flex;
  justify-content: center;
}

补充说明 #

你的布局里用了Bootstrap的input-group，它本身是flex布局，只要父容器（col或td）设置了水平居中，里面的加减按钮和输入框就能自动整齐排列，解决布局混乱问题。

内容的提问来源于stack exchange，提问作者Aswin