html - td 中的 CSS 样式复选框

Question

我想将表格内的复选框设置为中间/居中

我使用的肮脏方式是

<td>
    <input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>

但是，我正在寻找一种方法，使表格内的所有复选框都居中。所以我想出了一个 css

.table td input[type="checkbox"] {
    text-align: center;
}

但是 css 没有按预期工作。如何在 css 中设置样式？

Answer 1

在 input 的父级上设置它，在本例中为 td。

更新了仅针对特定单元格时显示操作方法

table td {
    text-align: center;
}

table {
  width: 300px;
}
table td {
  border: 1px solid;
}
table td.centered {
  text-align: center;
}

<table>
  <tr>
    <td class="centered">
      <input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
    </td>

    <td>
      Not centered
    </td>
  </tr>
</table>

如果同一单元格中有更多内容，请添加一个包装器

table {
  width: 300px;
}
table td {
  border: 1px solid;
  text-align: center;
}
table td div {
  text-align: left;
}

<table>
  <tr>
    <td>
      
      <input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">

      <div>
        Not centered
      </div>

    </td>
  </tr>
</table>