Question

我有一张桌子，其中一列只包含一个复选框，我目前正在使用

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

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

默认情况下，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>

Answer 2

您将完成与其他<td>完全相同的操作 - 您可以在text-align center; vertical-align: middle;上设置<th>，并且您无需在复选框中应用任何属性：

Here's an example of the code you'd use：

th{
    text-align: center;
    vertical-align: middle;
}

Answer 3

您可以使用text-align：center。这是看起来像：http://jsfiddle.net/RcztD/1/

<html>
<head></head>
<style type="text/css">
    .center{
        text-align:center;
    }
</style>
<body>

    <table border="1">
        <tr>
            <th valign="top" class="center">
                Search?<br />    
                <span class="th_not_bold">(all/none)</span><br />    
                <input type="checkbox" name="search_all" id="search_all onClick="ReportAllNoneClicked()" />  
            </th>
        </tr>
    </table>

</body>
</html>

如何将此复选框居中？

3 个答案: