如何将表格单元格中的复选框置中？ [英] How to center a checkbox in a table cell?
问题描述
单元格只包含一个复选框。它相当宽，因为表格标题行中的文本。 （我知道）
The cell contains nothing but a checkbox. It is rather wide because of text in the table header row. How do I center the checkbox (with inline CSS in my HTMNL? (I know))
我尝试了
<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?
更新：这里是测试页。有人可以更正它 - 在HTML中CSS inline - 以便复选框的中心在他们的列？
Update: here's a test page. Can someone please correct it - with CSS inline in the HTML - so that the checkboxes are centered in their columns?
<!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的回答 - 是与内联格式...
I have accepted @Hristo's answer - and here it is with inline formatting ...
<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>
推荐答案
UPDATE
如何处理... http://jsfiddle.net/gSaPb/
查看我的关于jsFiddle的示例： http://jsfiddle.net/ QzPGu /
Check out my example on 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;
}
我希望这有帮助。
这篇关于如何将表格单元格中的复选框置中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
