如何将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; 

这是唯一对我有用的东西。