Html 如何使表格单元格中的复选框居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5048485/
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 to center a checkbox in a table cell?
提问by Mawg says reinstate Monica
The cell contains nothing but a checkbox. It is rather wide because of text in the table header row. How do I center the checkbox (with inline CSS in my HTML? (I know))
该单元格仅包含一个复选框。由于表格标题行中的文本，它相当宽。如何将复选框居中（在我的 HTML 中使用内联 CSS？（我知道））
I tried
我试过
<td>
<input type="checkbox" name="myTextEditBox" value="checked"
style="margin-left:auto; margin-right:auto;">
</td>
but that didn't work. What am I doing wrong?
但这没有用。我究竟做错了什么？
Update: here's a test page. Can someone please correct it - with CSS inline in the HTML - so that the checkboxes are centered in their columns?
更新：这是一个测试页面。有人可以纠正它 - 在 HTML 中使用 CSS 内联 - 以便复选框在其列中居中？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
</head>
<body>
<table style="empty-cells:hide; margin-left:auto; margin-right:auto;" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
</tr>
<tr>
<td>
<input type="checkbox" name="query_myTextEditBox" style="text-align:center; vertical-align: middle;">
</td>
<td>
myTextEditBox
</td>
<td>
<select size ="1" name="myTextEditBox_compare_operator">
<option value="=">equals</option>
<option value="<>">does not equal</option>
</select>
</td>
<td>
<input type="text" name="myTextEditBox_compare_value">
</td>
<td>
<input type="checkbox" name="report_myTextEditBox" value="checked" style="text-align:center; vertical-align: middle;">
</td>
</tr>
</table>
</body>
</html>
I have accepted @Hristo's answer - and here it is with inline formatting ...
我已经接受了@Hristo 的回答——这里是内联格式......
<table style="empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<input type="checkbox" name="query_myTextEditBox">
</td>
<td>
myTextEditBox
</td>
<td>
<select size ="1" name="myTextEditBox_compare_operator">
<option value="=">equals</option>
<option value="<>">does not equal</option>
</select>
</td>
<td>
<input type="text" name="myTextEditBox_compare_value">
</td>
<td style="text-align: center; vertical-align: middle;">
<input type="checkbox" name="report_myTextEditBox" value="checked">
</td>
</tr>
</table>
回答by Hristo
UPDATE
更新
How about this... http://jsfiddle.net/gSaPb/
这个怎么样... http://jsfiddle.net/gSaPb/
Check out my example on jsFiddle: http://jsfiddle.net/QzPGu/
在 jsFiddle 上查看我的示例：http: //jsfiddle.net/QzPGu/
HTML
HTML
<table>
<tr>
<td>
<input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
</td>
</tr>
</table>
CSS
CSS
td {
text-align: center; /* center checkbox horizontally */
vertical-align: middle; /* center checkbox vertically */
}
table {
border: 1px solid;
width: 200px;
}
tr {
height: 80px;
}
I hope this helps.
我希望这有帮助。
回答by Andrew Marshall
Try
尝试
<td style="text-align:center;">
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
回答by Prabhakaran S
Try this, this should work,
试试这个，这应该有效，
td input[type="checkbox"] {
float: left;
margin: 0 auto;
width: 100%;
}
回答by Milo?
This should work, I am using it:
这应该有效，我正在使用它：
<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
回答by Carlos E
For dynamic writing td elements and not rely directly on the td Style
用于动态编写 td 元素而不是直接依赖 td 样式
<td>
<div style="text-align: center;">
<input type="checkbox">
</div>
</td>
回答by Dawson
Pull out ALL of your in-line CSS, and move it to the head. Then use classeson the cells so you can adjust everything as you like (don't use a name like "center" - you may change it to left 6 months from now...). The alignment answer is still the same - apply it to the <td>NOT the checkbox (that would just center your check :-) )
拉出所有内嵌 CSS，并将其移至头部。然后在单元格上使用类，以便您可以根据需要调整所有内容（不要使用“中心”之类的名称 - 您可以在 6 个月后将其更改为左侧...）。对齐答案仍然相同 - 将其应用于<td>NOT the checkbox（这只会使您的支票居中 :-) ）
Using you code...
使用您的代码...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
<style>
table { margin:10px auto; border-collapse:collapse; border:1px solid gray; }
td,th { border:1px solid gray; text-align:left; padding:20px; }
td.opt1 { text-align:center; vertical-align:middle; }
td.opt2 { text-align:right; }
</style>
</head>
<body>
<table>
<tr>
<th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
</tr>
<tr>
<td class="opt1"><input type="checkbox" name="query_myTextEditBox"></td>
<td>
myTextEditBox
</td>
<td>
<select size ="1" name="myTextEditBox_compare_operator">
<option value="=">equals</option>
<option value="<>">does not equal</option>
</select>
</td>
<td><input type="text" name="myTextEditBox_compare_value"></td>
<td class="opt2">
<input type="checkbox" name="report_myTextEditBox" value="checked">
</td>
</tr>
</table>
</body>
</html>
回答by Rick Smith
If you don't support legacy browsers, I'd use flexboxbecause it's well supportedand will simply solve most of your layout problems.
如果您不支持旧版浏览器，我会使用flexbox它，因为它得到了很好的支持，并且可以简单地解决您的大部分布局问题。
#table-id td:nth-child(1) {
/* nth-child(1) is the first column, change to fit your needs */
display: flex;
justify-content: center;
}
This centers all content in the first <td>of every row.
这将所有内容集中在<td>每一行的第一行。
回答by Plastónico
Define the float property of the check element to none:
将 check 元素的 float 属性定义为 none：
float: none;
And center the parent element:
并将父元素居中：
text-align: center;
It was the only that works for me.
这是唯一对我有用的。
回答by Sergey
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th class="text-center">Left</th>
<th class="text-center">Center</th>
<th class="text-center">Right</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<span>Bootstrap (class="text-left")</span>
</th>
<td class="text-left">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" checked />
</td>
<td class="text-right">
<input type="checkbox" />
</td>
</tr>
<tr>
<th>
<span>HTML attribute (align="left")</span>
</th>
<td align="left">
<input type="checkbox" />
</td>
<td align="center">
<input type="checkbox" checked />
</td>
<td align="right">
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>回答by askrich
Make sure that your <td>is not display: block;
确保你<td>的不是display: block;
Floating will do this, but much easier to just: display: inline;
浮动会做到这一点，但更容易：display: inline;
