CSS 使用 Twitter Bootstrap 在表格单元格中垂直居中按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13771101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering a button vertically in table cell, using Twitter Bootstrap
提问by Tim Habersack
I'm using Twitter Bootstrap, and attempting to center a button within a table cell. I only really need it centered vertically.
我正在使用 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>
Please see my JSFiddlefor the problem. I've tried several table centering tricks I know about, but none seem to work properly. Any ideas? Thanks in advance.
请参阅我的JSFiddle以了解问题。我已经尝试了几种我知道的表格居中技巧，但似乎没有一个能正常工作。有任何想法吗？提前致谢。
UPDATE:Yes, I've tried vertical-align:middle;, and that works if it's inline, but not if it's in a class the tdhas. Updated the JSFiddle to reflect this.
更新：是的，我已经尝试过vertical-align:middle;，如果它是内联的，那么它就可以工作，但如果它在一个类中就td不行了。更新了 JSFiddle 以反映这一点。
Final Update:I'm an idiot, and didn't check to see if it was being overwritten by bootstrap.css
最后更新：我是个白痴，没有检查它是否被 bootstrap.css 覆盖
回答by Tom Sarduy
FOR BOOTSTRAP 3.X:
对于引导程序 3.X：
Bootstrap now has the following style for table cells:
Bootstrap 现在具有以下表格单元格样式：
.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:
然后将类添加到您的tds：
<tr>
<td class="vert-aligned"></td>
...
</tr>
FOR BOOTSTRAP 2.X
对于引导程序 2.X
There is no way to do thiswith Bootstrap.
有没有办法做到这一点与引导。
When used in table cells, vertical-aligndoes 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:
当在表格单元格中使用时，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>
Check your fiddle updated
检查你的小提琴更新
Further
更远
- vertical-align: middle with Bootstrap 2
- Understanding vertical-align
- Vertical alignment of elements in a div
Also, you can't refer to the tdclass using .vertbecause Bootstrap already has this class:
此外，您不能引用td该类，.vert因为 Bootstrap 已经有这个类：
.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: middlein '.vert' class, so you have to define this class as td.vert.
并且正在重载vertical-align: middlein '.vert' 类，因此您必须将此类定义为td.vert.
回答by Gabriel G. Roy
A little update for Bootstrap 3.
Bootstrap 3 的一些更新。
Bootstrap now has the following style for table cells:
Bootstrap 现在具有以下表格单元格样式：
.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
然后将其添加到您的 tds
<td class="vert-align"></td>
回答by Andrew
add this to your css
将此添加到您的 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">
回答by Deviney
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
这在我的 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.
因为 CSS 类直接指向 td (tabledata) 元素，并且在每个设置的末尾都有 !important 语句。它将超过规则引导 CSS 类设置。
Hope it helps
希望能帮助到你
回答by Forty-Two
Add vertical-align: middle;to the tdelement that contains the button
添加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>
回答by Jens Alenius
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.
那么为什么 td 默认设置为 vertical-align: top; ？我真的还不知道。我不敢碰它。而是将其添加到您的样式表中。它改变了表格中的按钮。
table .btn{
vertical-align: top;
}
