使用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
Stack Overflow用户
发布于 2012-12-08 05:43:03
对于BOOTSTRAP 3.X：
Bootstrap现在具有以下表格单元格样式：
.table tbody > tr > td{
vertical-align: top;
}方法是添加您自己的类，为前面的选择器添加更多的特异性：
.table tbody > tr > td.vert-aligned {
vertical-align: middle;
}然后将类添加到您的td中：
<tr>
<td class="vert-aligned"></td>
...
</tr>对于BOOTSTRAP 2.X
有带Bootstrap的no way to do this。
当在表单元格中使用时，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
进一步
- vertical-align: middle with Bootstrap 2
- Understanding vertical-align
- Vertical alignment of elements in a div
此外，您不能使用.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，所以你必须将这个类定义为td.vert。
Stack Overflow用户
发布于 2013-10-31 07:00:45
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>Stack Overflow用户
发布于 2013-11-18 09:39:12
将此代码添加到css中
.table-vcenter td {
vertical-align: middle!important;
}然后将类添加到表中：
<table class="table table-hover table-striped table-vcenter">https://stackoverflow.com/questions/13771101
复制相似问题