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> 

Answer 2

尝试这个

td input[type="checkbox"] {
    width:20px;
    height:20px;
    display:block;
    argin:0px auto;
}

Answer 3

 function alerrt() { alert("I am centered! checkbox"); } 

 table { width: 300px; } table td { min-width: 150px; border: 1px solid; text-align: center; padding:5px; } table td lable{ margin-right:10px; } 

 <table> <tr> <td class="centered"> <lable> please check </lable> <input type="checkbox" onclick="alerrt()" style="text-align:center;" ng-model="x.dedbuffer"> </td> </tr> </table>