尝试将按钮在<td>中居中对齐

Question

我无法将一个按钮居中在一个标签中。

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

我试图在带有按钮的标签上设置“水平对齐:中心”，但似乎没有应用该属性。按钮仍然倾向于单元格的左侧。

- David M. Karr

---

你尝试在TD上添加align="center"了吗？ - Billy Moat

"text-align:center"是指将文本在水平方向上居中对齐。 - T J

除了@dawuut，有没有其他人注意到我已经有这个了？我本以为我在那个CSS规则的“特异性”方面有问题，但是dawuut的解决方案，只是更改了我设置“水平对齐”和“文本对齐”的CSS规则的地方，实际上确实起作用。 - David M. Karr

Answer 1

你可以使用：

display: block;
margin: auto;

这里是您更新后的 plunkr

- meriadec

---

正确的解决方案往往是最难理解的。 - David M. Karr

CSS有它自己的奥秘 :) - meriadec

Answer 2

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

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

发表这篇文章后，我发现在HTML5中已被弃用，所以最好只在CSS的TD上使用"text-align:center"

- Billy Moat

---

在HTML5中，align属性已被移除。 - dsgriffin

@null - 每天都有新的东西可以学习！虽然它仍然有效，但最好使用CSS。 - Billy Moat

Answer 3

这对我有用

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

- vineel

Answer 4

我发现必须将以下属性结合起来才能使JSF控件在页面上居中:

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

- Fuzzy Analysis

Answer 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可以将内容垂直居中。

- tdahman1325

Answer 6

对我来说它运行良好

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

- Sundaramoorthy Anandh

Answer 7

更改按钮而不是 td？对样式的影响要小。

table .btn{
  vertical-align: top;
}

- Jens Alenius

Answer 8

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

对我有用。

- Vinay