CSS 如何使此复选框居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8177350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I centre this checkbox?
提问by Mawg says reinstate Monica
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
现在我想添加一些 JS 来（取消）全选/无，所以我想在我的表格标题行中添加一个复选框，以及一些文本
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.
默认情况下，TH 是粗体，我很高兴为实际的列标题文本保留它，但我是“全部/无”的普通文本，然后我想要一个居中的复选框。
----------------
| 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>
回答by Varun
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>
回答by Nightfirecat
You would do exactly the same thing you did for your other <td>- you would set text-align center; vertical-align: middle;on the <th>, and you wouldn't need to apply any properties to the checkbox:
您会为其他人做完全相同的事情<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;
}
回答by Micah
You can use text-align:center. Here is what is looks like: http://jsfiddle.net/RcztD/1/
您可以使用文本对齐：居中。这是看起来像：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>
