How do I centre this checkbox?

Question

I have a table, one column of which contains only a checkbox and I am currently centering these with

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

Now I want to add some JS to (de)select all/none, so I want to add a checkbox in my table header row, along with some text

TH is, by default, bold and I am happy leave it so for actual Column header text, bu I was normal text for the "all/none" and then I want a centered checkbox below that.

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

here's my code - how do I get that checkbox to center?

<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

try using

<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>