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

时间:2012-12-07 21:17:20

标签: css 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覆盖

6 个答案:

答案 0 :(得分:156)

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

FOR BOOTSTRAP 2.X

no way to do this有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>

检查fiddle updated

另外

另外,你不能使用td来引用.vert类,因为Bootstrap已经有了这个类:

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

并且正在重载“.vert”类中的vertical-align: middle,因此您必须将此类定义为td.vert

答案 1 :(得分: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>

答案 2 :(得分:14)

将此添加到您的css

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

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

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

答案 3 :(得分:2)

要解决此问题,我将此课程放在网页上

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

这在我的TemplateField

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

因为CSS类直接指向td(tabledata)元素,并且在每个设置的末尾都有!important语句。它将超过规则bootraps CSS类设置。

希望有所帮助

答案 4 :(得分: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>

答案 5 :(得分:0)

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

table .btn{
  vertical-align: top;
}