关于html：如何在表格单元格中居中放置复选框？

How to center a checkbox in a table cell?

该单元格仅包含一个复选框。由于表标题行中的文本，它的宽度相当大。如何将复选框居中(在HTML中包含内联CSS？(我知道))

我尝试了

1
2
3
4

但是那没用。我究竟做错了什么？

更新：这是一个测试页。有人可以更正它吗(在HTML中使用CSS内联)，以使复选框位于其列的中心？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
Alignment test
</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?</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 \\的回答-这就是内联格式...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

相关讨论

尝试一下，这应该可行，

1
2
3
4
5

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

这应该工作，我正在使用它：

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

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

1
2
3
4
5

拉出所有内嵌CSS，然后将其移到头部。然后在单元格上使用类，以便您可以随意调整所有内容(不要使用" center"之类的名称-您可以将其更改为从现在起6个月内剩余的时间...)。对齐方式答案仍然相同-将其应用于<td>而不是复选框(该复选框只会使您的检查居中:-))

使用您的代码...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
Alignment test
<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?</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>

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

1
2
3
4
5

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

这会将所有内容置于每行的前一个<td>中。

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

1	float: none;

并将父元素居中：

1	text-align: center;

这是唯一对我有用的。

我的问题是position: absolute !important有一个父样式，不允许我对其进行编辑。

所以我给了我特定的复选框position: relative !important，它解决了垂直未对准的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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

浮动会做到这一点，但更容易做到：display: inline;