试图在 td 中居中对齐按钮答案

【问题标题】：Trying to center align button in td试图在 td 中居中对齐按钮
【发布时间】：2014-04-18 14:04:36
【问题描述】：

我无法在 td 中将按钮居中。

这可能是一个简单的 CSS 问题，但该应用正在使用 bootstrap、AngularJS、AngularJS-ui-bootstrap 和 ngTable。我已将所有这些组件包含在我的 plunkr 中。

我正在尝试使用按钮在 td 上设置“horizontal-align: middle”，但这似乎没有得到应用。按钮仍然倾斜在单元格的左侧。

【问题讨论】：

你试过在TD上加align="center"吗？"
text-align:center 呢？
除了@dawuut 以外的其他人是否注意到我已经拥有了这个？我原以为我对那个 css 规则的“特异性”有疑问，但是 dawuut 的解决方案，它只是改变了我有“horizontal-align”和“text-align”设置的 css 规则，确实有效。

标签： html css angularjs twitter-bootstrap-3 ngtable

【解决方案1】：

你可以使用：

display: block;
margin: auto;

Here is your updated plunkr

【讨论】：

它表明正确的解决方案是最难理解的。
css 有它自己的奥秘 :)

【解决方案2】：

正如我在上面的评论中所说，只需将 TD 更改为具有 align="center" 属性。

<td align="center"></td>

自从发布此内容后，我发现 HTML5 已弃用此内容，因此最好在 CSS 中的 TD 上使用“text-align: center”>

【讨论】：

在 HTML5 中移除了 align 属性。
@null - 你每天都会学到新东西！它仍然有效，但我猜最好使用 CSS。

【解决方案3】：

这对我有用

<td style="text-align: center">

【讨论】：

【解决方案4】：

我发现我必须结合以下属性来使 JSF 控件在页面上居中：

<h:form style="display: block; text-align: center; margin: auto; width: 200px">
<!-- components here -->
</h:form>

【讨论】：

【解决方案5】：

如果您使用的是 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-center 将内容水平居中，而align-middle 将内容垂直居中。

【讨论】：

【解决方案6】：

对我来说效果很好

<td align="center">
 <input type="button" style="float:none!important;display:inline;" value="click" />
</td>

【讨论】：

【解决方案7】：

更改按钮而不是 td？减少对风格的影响。

table .btn{
  vertical-align: top;
}

【讨论】：

【解决方案8】：

HTML:
    <td class="table-row-radio-button"> <input type="radio"> </td>
CSS:
    .table-row-radio-button {
        text-align: center;
    }

为我工作。

【讨论】：