html - td 没有与 btn-group 对抗

Question

<td> 中的文本未居中对齐(valign)，直接与 btn-group 对齐最后<td> .

参见示例: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;
}

这也有一个特殊性问题。因此，上面的代码可以以正确的特异性获取正确的目标元素。

fiddle :https://jsfiddle.net/9x0f7r3c/