td's未与btn-group组对齐

Question

<td>中的文本未在最后<td>上集中排队（valign）直接针对btn-group。

见例如：https://jsfiddle.net/rsf1f6wn/

如何解决这一问题？

<table id="myDataTable" class="table" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Location</th> 
     <th>Orders</th> 
     <th></th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr class="active"> 
     <td><a href="#">FirstName Lastame</a></td> 
     <td>USA</td> 
     <td>10</td> 
     <td> 
     <div class="btn-group pull-right"> 
      <button type="button" class="btn btn-sm">Edit</button> 
      <button type="button" class="btn btn-sm">Add</button> 
     </div> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

你需要给vertical-align: middle为以下类别：

.table thead>tr>th, 
.table tbody>tr>th, 
.table tfoot>tr>th, 
.table thead>tr>td, 
.table tbody>tr>td, 
.table tfoot>tr>td { 
    vertical-align: middle; 
} 

这也有特异性的关注。所以上面的代码可以用正确的元素来获得正确的元素。

小提琴：https://jsfiddle.net/9x0f7r3c/