如何将checkbox置于表格单元格中？
该单元格只包含一个checkbox。 由于表格标题行中的文字相当宽泛。 我如何居中checkbox（内联CSS在我的HTML？（我知道））
我试过了
<td> <input type="checkbox" name="myTextEditBox" value="checked" style="margin-left:auto; margin-right:auto;"> </td> 但是这并没有奏效。 我究竟做错了什么？
更新：这是一个testing页面。 有人可以纠正它 – 与CSS内联在HTML中 – 以便checkbox居中在他们的列？
<!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>
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; }
我希望这有帮助。
尝试
<td style="text-align:center;"> <input type="checkbox" name="myTextEditBox" value="checked" /> </td>
试试这个，这个应该可以，
td input[type="checkbox"] { float: left; margin: 0 auto; width: 100%; }
拉出所有的在线CSS ，并将其移动到头部。 然后在单元格上使用类 ，以便随意调整所有内容（不要使用“中心”这样的名称 – 您可以将其更改为从现在起6个月左右）。 alignment的答案仍然是相同的 – 将其应用于<td> NOTcheckbox（这将只是中心检查:-)）
使用你的代码…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Alignment test</title> <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?<br></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>
这个工作，我正在使用它：
<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
如果你不支持传统的浏览器，我会使用flexbox因为它很好的支持 ，只会解决大部分布局问题。
#table-id td:nth-child(1) { /* nth-child(1) is the first column, change to fit your needs */ display: flex; justify-content: center; }
这将所有内容放在每一行的第一个<td>中。
对于dynamic写入TD元素，而不是直接依赖TD的风格
<td> <div style="text-align: center;"> <input type="checkbox"> </div> </td>
确保你的<td>不是display: block;
浮动将做到这一点，但更容易，只是： display: inline;
定义check元素的float属性为none：
float: none;
并居中父元素：
text-align: center;
这是唯一对我有用的东西。
