单元格只包含一个复选框.由于表标题行中的文本,它相当宽.如何将复选框居中(在我的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>
Hri*_*sto 106
UPDATE
怎么样...... http://jsfiddle.net/gSaPb/
看看我在jsFiddle上的例子:http://jsfiddle.net/QzPGu/
HTML
<table>
<tr>
<td>
<input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
</td>
</tr>
</table>
CSS
td {
text-align: center; /* center checkbox horizontally */
vertical-align: middle; /* center checkbox vertically */
}
table {
border: 1px solid;
width: 200px;
}
tr {
height: 80px;
}
我希望这有帮助.
And*_*all 27
尝试
<td style="text-align:center;">
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
小智 20
试试这个,这应该工作,
td input[type="checkbox"] {
float: left;
margin: 0 auto;
width: 100%;
}
Mil*_*loš 10
这应该工作,我正在使用它:
<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
用于动态编写 td 元素而不是直接依赖 td 样式
<td>
<div style="text-align: center;">
<input type="checkbox">
</div>
</td>