40

我在 td 中将按钮居中时遇到问题。

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

我正在尝试使用按钮在 td 上设置“水平对齐：中间”，但这似乎没有得到应用。按钮仍然倾斜在单元格的左侧。

4

8 回答 8

75

您可以使用 ：

display: block;
margin: auto;

这是您更新的 plunkr

于 2014-03-13T16:49:28.003 回答
12

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

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

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

于 2014-03-13T16:49:35.207 回答
9

这对我有用

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

于 2016-06-21T14:36:43.600 回答
3

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

<h:form style="display: block; text-align: center; margin: auto; width: 200px">
<!-- components here -->
</h:form>
于 2015-04-10T06:50:34.243 回答
3

如果您使用的是 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内容垂直居中。

于 2019-07-18T14:08:33.137 回答
2

对我来说效果很好

<td align="center">
 <input type="button" style="float:none!important;display:inline;" value="click" />
</td>
于 2018-06-21T11:56:28.697 回答
1

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

table .btn{
  vertical-align: top;
}
于 2016-03-09T13:39:38.377 回答
0 
HTML:
    <td class="table-row-radio-button"> <input type="radio"> </td>
CSS:
    .table-row-radio-button {
        text-align: center;
    }

为我工作。

于 2018-04-09T03:17:58.700 回答