使用Twitter引导，在表格单元格中垂直居中一个按钮

Question

我正在使用Twitter引导，并试图将一个按钮置于表格单元格的中心。我只需要它垂直居中。

<table class="table table-bordered table-condensed">
  <tbody>
    <tr>
      <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>
      <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>
    </tr>
  </tbody>
</table>

请查看我的JSFIDLE以了解问题。我已经尝试了几个我知道的桌子对中技巧，但似乎没有一个能正常工作。有什么想法吗？提前谢谢。

UPDATE：是的，我已经尝试了垂直对齐：中间；，如果它是内联的，它就可以工作，但如果它在td的类中，就不行了。更新了JSFiddle以反映这一点。

最后更新：我是个白痴，没有检查它是否被bootstrap.css覆盖

Answer 1

把这个加到你的css里

.table-vcenter td {
   vertical-align: middle!important;
}

然后将类添加到表中：

        <table class="table table-hover table-striped table-vcenter">

Answer 2

Bootstrap3的一个小更新。

引导现在具有以下表格单元格样式：

.table tbody>tr>td
{
    vertical-align: top;
}

方法是使用相同的选择器添加您自己的类：

.table tbody>tr>td.vert-align
{
    vertical-align: middle;
}

然后将其添加到您的tds中

<td class="vert-align"></td>

Answer 3

引导现在具有以下表格单元格样式：

.table tbody > tr > td{
    vertical-align: top;
}

方法是添加您自己的类，为前面的选择器添加更多的特性：

.table tbody > tr > td.vert-aligned {
    vertical-align: middle;
}

然后将类添加到您的tds中：

<tr>
    <td class="vert-aligned"></td>
    ...
</tr>

有没有办法做到这一点与引导。

当在表格单元格中使用时，垂直对齐做了大多数人期望它做的事情，那就是模仿（旧的、不建议使用的）valign属性。在符合标准的现代浏览器中，以下三个代码片段执行相同的操作：

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

检查你的小提琴

• 垂直对齐：中间与引导2
• 了解垂直对齐
• div中元素的垂直对齐

此外，不能使用引用td类。vert因为引导程序已经有了这个类：

.table td {
   padding: 8px;
   line-height: 20px;
   text-align: left;
   vertical-align: top; // The problem!
   border-top: 1px solid #dddddd;
}

并且正在重载vertical align:middlein'。vert’类，因此必须将该类定义为td。垂直。