如何在表格单元格中将复选框居中？

单元格只包含一个复选框。它相当宽，因为表格标题行中有文本。如何将复选框居中(在 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?

更新: 这里有一个测试页面。有人可以纠正它-与 CSS 内联在 HTML-使复选框中心在他们的列？

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

我已经接受了@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>
340671 次浏览
小开

试试看

<td style="text-align:center;">
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
小开
最佳答案

这个怎么样... http://jsfiddle.net/gSaPb/

查看我在 jsFiddle: http://jsfiddle.net/QzPGu上的示例:

td {
text-align: center;
/* center checkbox horizontally */
vertical-align: middle;
/* center checkbox vertically */
}


table {
border: 1px solid;
width: 200px;
}


tr {
height: 80px;
}
<table>
<tr>
<td>
<input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
</td>
</tr>
</table>

小开

取出所有的内联 CSS ，移动到头部。然后在细胞上使用 使用类，这样你就可以随心所欲地调整一切(不要使用像“ center”这样的名字——从现在起6个月后你可以把它改成 left...)。对齐的答案仍然是相同的-应用它到 <td>而不是复选框(这将只是中心您的选择: ——)

用你的代码。

<!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>
小开

这应该行得通，我正在使用它:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
小开

试试这个，应该可以,

td input[type="checkbox"] {
float: left;
margin: 0 auto;
width: 100%;
}
小开

确保你的 <td>不是 display: block;

浮点运算可以做到这一点，但是更简单的方法是: display: inline;

小开

将 check 元素的 float 属性定义为 none:

float: none;

以父元素为中心:

text-align: center;

这是唯一适合我的。

小开

如果您不支持旧式浏览器，我会使用 flexbox，因为它是 很好的支持，可以简单地解决大多数布局问题。

#table-id td:nth-child(1) {
/* nth-child(1) is the first column, change to fit your needs */
display: flex;
justify-content: center;
}

这将所有内容集中在每行的第一个 <td>中。

小开

用于动态编写 td 元素，而不直接依赖于 td 样式

  <td>
<div style="text-align: center;">
<input  type="checkbox">
</div>
</td>
小开 

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

小开

My problem was that there was a parent style with position: absolute !important which I was not allowed to edit.

所以我给了我特定的复选框 position: relative !important，它修复了垂直错位的问题。


提交答案