我正在使用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覆盖
答案 0 :(得分:156)
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>
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>
另外,你不能使用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;
}