如何使复选框在表格单元格中居中？
如何使复选框在表格单元格中居中？
提问于 2011-02-19 10:38:56
单元格只包含一个复选框。由于表头行中的文本，它相当宽。如何使复选框居中(在HTML中使用内联CSS？(我知道)
我试过了
<td>
<input type="checkbox" name="myTextEditBox" value="checked"
style="margin-left:auto; margin-right:auto;">
</td>但这并不管用。我做错了什么？
更新:这是一个测试页面。有没有人能改正一下--在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>我已经接受了@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>回答 10
Stack Overflow用户
回答已采纳
发布于 2011-02-19 11:18:04
这个怎么样..。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>
Stack Overflow用户
发布于 2011-02-19 10:43:34
试一试
<td style="text-align:center;">
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>Stack Overflow用户
发布于 2013-11-18 15:23:33
试试这个，这个应该行得通，
td input[type="checkbox"] {
float: left;
margin: 0 auto;
width: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5048485
复制相关文章
相似问题
腾讯云开发者
