单元格只包含一个复选框。由于表格标题行中的文本,它相当宽。如何使复选框居中(在我的 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>
最佳答案
这个怎么样... 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>
关于html - 如何使表格单元格中的复选框居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5048485/