如何将此复选框居中?

Maw*_*awg 6 css

我有一个表,其中一列只包含一个复选框,我目前正在使用这些表

<td style="text-align:center; vertical-align:middle;">
  <input type="checkbox" name="xyz">
</td>
Run Code Online (Sandbox Code Playgroud)

现在我想添加一些JS来(de)选择all/none,所以我想在我的表头行中添加一个复选框,以及一些文本

默认情况下,TH是粗体,我很高兴为实际的列标题文本留下它,我是"全部/无"的普通文本然后我想要一个居中的复选框.

----------------  
| Search ?   | Next column  
| (all/none) |  
|   [x]      |  
Run Code Online (Sandbox Code Playgroud)

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

<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>
Run Code Online (Sandbox Code Playgroud)

Var*_*run 8

尝试使用

<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>
Run Code Online (Sandbox Code Playgroud)