垂直放置在表格单元中的button，使用Twitter Bootstrap
我正在使用Twitter Bootstrap，并尝试将一个button居中在一个表格单元格中。 我只是真的需要它垂直居中。
<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覆盖
FOR BOOTSTRAP 3.X：
Bootstrap现在对表格单元具有以下样式：
.table tbody > tr > td{ vertical-align: top; }
要走的路是添加你自己的类，给前面的select器增加更多的特性：
.table tbody > tr > td.vert-aligned { vertical-align: middle; }
然后将这个类添加到你的td ：
<tr> <td class="vert-aligned"></td> ... </tr>
对于BOOTSTRAP 2.X
Bootstrap 无法做到这一点 。
在表格单元格中使用时， 垂直alignment是大多数人所期望的，也就是模仿（旧的，不赞成使用的）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>
检查你的小提琴更新
进一步
- 垂直alignment：中间与Bootstrap 2
- 了解垂直alignment
- 元素在一个div中的垂直alignment
另外，你不能使用.vert来引用td类，因为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重载vertical-align: middle ，所以你必须把这个类定义为td.vert 。
Bootstrap 3的一个小更新。
Bootstrap现在对表格单元具有以下样式：
.table tbody>tr>td { vertical-align: top; }
要走的路是用相同的select器添加一个你自己的类：
.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）元素，并在每个设置结束时具有！重要的语句。 它将超过规则bootsraps CSS类设置。
希望能帮助到你
添加vertical-align: middle; 到包含button的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;？ 我现在还不知道。 我不敢碰它。 相反，将其添加到您的样式表。 它改变了表中的button。
table .btn{ vertical-align: top; }
