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/