css - 我如何使这个复选框居中？

Question

我有一个表格，其中一列只包含一个复选框，我目前将它们居中

<td style="text-align:center; vertical-align:middle;">
  <input type="checkbox" name="xyz">
</td>

现在我想添加一些 JS 来(取消)全选/全选，所以我想在我的表格标题行中添加一个复选框，以及一些文本

默认情况下，TH 是粗体，我很高兴将它留给实际的列标题文本，但我是“全部/无”的普通文本，然后我想要一个位于其下方的居中复选框。

----------------  
| Search ?   | Next column  
| (all/none) |  
|   [x]      |  

这是我的代码 - 如何让复选框居中？

<th>Search?<br>    
    <span class="th_not_bold">(all/none)</span><br>    
    <input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()">  
</th>

Answer 1

尝试使用

<th> 
<td style="text-align:center; vertical-align:middle;">
<div>Search</div>
    <div class="th_not_bold">(all/none)</div>
    <div><input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()"> </div>
</td>
</th>