使用Twitter Bootstrap在表单元格中垂直居中放置按钮

我正在使用Twitter Bootstrap，并试图将按钮置于表格单元格的中央。我只需要垂直居中即可。

<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>

请参阅我的JSFiddle以获得该问题。我尝试了一些我知道的表格居中技巧，但似乎都无法正常工作。有任何想法吗？提前致谢。

更新：是的，我已经尝试过了vertical-align:middle;，如果它是内联的，那行得通，但是如果它在具有的类中，那行不通td。更新了JSFiddle以反映这一点。

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

对于BOOTSTRAP 3.X：

Bootstrap现在对表单元格具有以下样式：

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

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

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

然后将该类添加到您td的中：

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

对于自举2.X

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

当在表单元格中使用时，vertical-align可以实现大多数人的期望，即模仿（旧的，已弃用的）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>

检查您的小提琴更新

进一步

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

另外，您不能td使用来引用该类，.vert因为Bootstrap已经具有此类：

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

并且正在重载vertical-align: middle'.vert'类中的内容，因此您必须将此类定义为td.vert。

Bootstrap 3的一点更新。

Bootstrap现在对表单元格具有以下样式：

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

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

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

然后将其添加到您的tds

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

将此添加到您的CSS

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

然后添加到表中的类：

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

为了解决这个问题，我将此类放在网页上

<style>                        
    td.vcenter {
        vertical-align: middle !important;
        text-align: center !important;
    }
</style>

这在我的TemplateField中

<asp:TemplateField ItemStyle-CssClass="vcenter">

因为CSS类直接指向td（tabledata）元素，并且每个设置的末尾都有！important语句。它将超出规则引导CSS类设置。

希望能帮助到你

添加vertical-align: middle;到td包含按钮的元素

<td style="vertical-align:middle;">  <--add this to center vertically
  <a href="#" class="btn btn-primary">
    <i class="icon-check icon-white"></i>
  </a>
</td>

那么为什么td默认设置为vertical-align：top ;？我真的还不知道 我不敢碰它。而是将其添加到样式表中。它改变了表格中的按钮。

table .btn{
  vertical-align: top;
}