使用Twitter Bootstrap在表格单元格中垂直居中

Question

我正在使用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覆盖

Answer 1

FOR BOOTSTRAP 3.X:

Bootstrap现在具有表格单元格的以下样式:

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

要做的就是添加自己的类,为前一个选择器添加更多特异性:

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

然后将类添加到您的tds:

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

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

检查你的小提琴更新

进一步

• vertical-align:中间有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.

Answer 2

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>

Answer 3

将此添加到您的CSS

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

然后将类添加到表中:

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