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/