92

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

4

6 回答 6

160

对于引导 3.X：

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

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

要走的路是添加你自己的类，为之前的选择器添加更多的特异性：

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

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

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

对于引导 2.X

Bootstrap无法做到这一点。

当在表格单元格中使用时，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>

检查你的小提琴更新

更远

此外，您不能引用使用的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.

于 2012-12-07T21:43:02.833 回答
43

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>
于 2013-10-30T23:00:45.490 回答
14

将此添加到您的CSS

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

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

        <table class="table table-hover table-striped table-vcenter">
于 2013-11-18T01:39:11.720 回答
2

为了解决这个问题，我把这门课放在网页上

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

这在我的 TemplateField

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

因为 CSS 类直接指向 td (tabledata) 元素，并且在每个设置的末尾都有 !important 语句。它将覆盖规则引导程序 CSS 类设置。

希望能帮助到你

于 2014-09-18T09:46:07.500 回答
1

添加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>
于 2012-12-07T21:35:55.260 回答
0

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

table .btn{
  vertical-align: top;
}
于 2016-03-09T13:37:25.220 回答