将复选框与仅 td 样式的中心对齐复选框？

【问题标题】：Aligning checkbox to center of td styling only checkbox?将复选框与仅 td 样式的中心对齐复选框？
【发布时间】：2014-11-11 03:08:22
【问题描述】：

我有一个包含复选框的特定行的表。我想让这些复选框与其父 td 的中心对齐。我知道我可以通过这样设置父 td 的样式来实现：

td {
    text-align: center;
}

我也知道我可以使用 jQuery 轻松实现，但不幸的是，我无法使用 jQuery。

该表是通过 .NET 创建的，我无法通过提供某个类来定位包含复选框的特定列。

我想知道是否有一种方法可以设置复选框本身的样式以使其与其父 td 的中心对齐。

类似：

input[type=checkbox] {
    margin: auto;
}

【问题讨论】：

【解决方案1】：

您可以通过将 display: block; 和 margin: 0 auto; 设置为 input[type=checkbox] 来做到这一点

JSFiddle - DEMO

td {
    width: 100%;
    background: #EEE;
}
input[type=checkbox] {
    margin: 0 auto;
    display: block;
}

解决方案 2： - DEMO

将display: table; 或display: flex; 设置为input[type=checkbox]

td {
    width: 100%;
    background: #EEE;
}
input[type=checkbox] {
    margin: 0 auto;
    display: table;
}

更多信息：

What, exactly, is needed for “margin: 0 auto;” to work?

【讨论】：