Html 尝试在 td 中居中对齐按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22385386/
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
Trying to center align button in td
提问by David M. Karr
I'm having trouble centering a button in a td.
我无法将 td 中的按钮居中。
This is probably a simple CSS issue, but the app is using bootstrap, AngularJS, AngularJS-ui-bootstrap, and ngTable. I've included all of these components in my plunkr.
这可能是一个简单的 CSS 问题，但该应用程序正在使用 bootstrap、AngularJS、AngularJS-ui-bootstrap 和 ngTable。我已经在我的plunkr 中包含了所有这些组件。
I'm trying to set "horizontal-align: middle" on the td with the button, but that doesn't seem to get applied. The button still leans to the left side of the cell.
我正在尝试使用按钮在 td 上设置“水平对齐：中间”，但这似乎没有得到应用。按钮仍然倾向于单元格的左侧。
回答by meriadec
回答by Billy Moat
As I said in my comment above simply change the TD to have the align="center" property.
正如我在上面的评论中所说，只需将 TD 更改为具有 align="center" 属性即可。
<td align="center"></td>
Since posting this I've discovered that this is deprecated in HTML5 so best just to use "text-align: center" on the TD in your CSS>
自从发布这篇文章后，我发现这在 HTML5 中已被弃用，因此最好在 CSS 的 TD 上使用“text-align: center”>
回答by Fuzzy Analysis
I found that I had to combine the following attributes to center JSF controls on a page:
我发现我必须结合以下属性才能在页面上居中 JSF 控件：
<h:form style="display: block; text-align: center; margin: auto; width: 200px">
<!-- components here -->
</h:form>
回答by vineel
This worked for me
这对我有用
<td style="text-align: center">
<td style="text-align: center">
回答by tdahman1325
If you are using Bootstrap 4 add these classes to the <td>element (mine has 2 buttons):
如果您使用的是 Bootstrap 4，请将这些类添加到<td>元素中（我的有 2 个按钮）：
<td class="text-center align-middle">
<div class="btn-group">
<button class="btn btn-outline-primary">+</button>
<button class="btn btn-outline-primary">-</button>
</div>
</td>
text-centerwill center content horizontally, while align-middlecenters content vertically.
text-center将内容水平居中，而align-middle内容垂直居中。
回答by Jens Alenius
Alter the button instead of td? Make less impact on the style.
更改按钮而不是 td？减少对风格的影响。
table .btn{
vertical-align: top;
}
回答by Vinay
HTML:
<td class="table-row-radio-button"> <input type="radio"> </td>
CSS:
.table-row-radio-button {
text-align: center;
}
worked for me.
为我工作。
回答by Sundara Moorthy Anandh
It worked fine for me
它对我来说很好用
<td align="center">
<input type="button" style="float:none!important;display:inline;" value="click" />
</td>
