使用 Bootstrap 将按钮垂直放在表格单元格中

我正在使用 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 覆盖

128649 次浏览
小开

Add vertical-align: middle; to the td element that contains the button

<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>
小开
最佳答案

FOR BOOTSTRAP 3.X:

Bootstrap now has the following style for table cells:

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

The way to go is to add your own class, adding more specificity to the previous selector:

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

And then add the class to your tds:

<tr>
<td class="vert-aligned"></td>
...
</tr>

FOR BOOTSTRAP 2.X

There is no way to do this with Bootstrap.

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>

Check your fiddle updated

Further

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;
}

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

小开

A little update for Bootstrap 3.

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;
}

And then add it to your tds

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

add this to your css

.table-vcenter td {
vertical-align: middle!important;
}

then add to the class to your table:

        <table class="table table-hover table-striped table-vcenter">
小开

To fix this, i put this class on the webpage

<style>
td.vcenter {
vertical-align: middle !important;
text-align: center !important;
}
</style>

and this in my TemplateField

<asp:TemplateField ItemStyle-CssClass="vcenter">

as the CSS class points directly to the td (tabledata) element and has the !important statment at the end each setting. It will over rule bootsraps CSS class settings.

Hope it helps

小开

So why is td default set to vertical-align: top;? I really don't know that yet. I would not dare to touch it. Instead add this to your stylesheet. It alters the buttons in the tables. 

table .btn{
vertical-align: top;
}

提交答案