将按钮垂直放在表格单元格中，使用Twitter Bootstrap [英] Centering a button vertically in table cell, using Twitter Bootstrap

问题描述

我正在使用Twitter Bootstrap，并尝试在表格单元格中居中一个按钮。我只需要它垂直居中。

I'm using Twitter Bootstrap, and attempting to center a button within a table cell. I only really need it centered vertically.

<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 的问题。我试过几个表中心的技巧我知道，但没有一个似乎工作正常。有任何想法吗？提前感谢。

Please see my JSFiddle for the problem. I've tried several table centering tricks I know about, but none seem to work properly. Any ideas? Thanks in advance.

更新：是的，我尝试过 vertical-align：middle; ，如果它是内联的工作，但不是如果它在一个类 td 有。更新了JSFiddle以反映这一点。

UPDATE: Yes, I've tried vertical-align:middle;, and that works if it's inline, but not if it's in a class the td has. Updated the JSFiddle to reflect this.

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

Final Update: I'm an idiot, and didn't check to see if it was being overwritten by bootstrap.css

推荐答案

FOR BOOTSTRAP 3.X：

感谢 @GabbrielGRoy ：

Bootstrap现在有表格单元格的下列样式：

Bootstrap now has the following style for table cells:

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

方法是添加一个自己的类， ：

The way to go is to add a your own class, with the same selector:

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

然后将它添加到您的 td s：

And then add it to your tds:

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

FOR BOOTSTRAP 2.X

是使用Bootstrap 无法执行此操作。

当在表格单元格中使用时， vertical-align 会执行大多数人期望的操作，即模仿（旧的，已弃用的）valign属性。在现代的符合标准的浏览器中，以下三个代码段执行的操作相同：

When used in table cells, vertical-align does what most people expect it to, which is to mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets do the same thing:

<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：middle with Bootstrap 2


• 了解vertical-align


• div中元素的垂直对齐

• vertical-align: middle with Bootstrap 2
• Understanding vertical-align
• vertical alignment of elements in a div

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

Also, you can't refer to the td class using .vert because Bootstrap already has this class:

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

And is overloading the vertical-align: middle in '.vert' class, so you have to define this class as td.vert.

这篇关于将按钮垂直放在表格单元格中，使用Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！