我使用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覆盖
解决方法
FOR BOOTSTRAP 3.X:
感谢@GabbrielGRoy:
Bootstrap现在具有表单元格的以下样式:
.table tbody>tr>td{ vertical-align: top; }
.table tbody>tr>td.vert-align{ vertical-align: middle; }
然后将它添加到您的tds:
<td class="vert-align"></td>
FOR 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。