html - How to center a checkbox in a table cell? -
the cell contains nothing checkbox. rather wide because of text in table header row. how center checkbox (with inline css in html? (i know))
i tried
<td> <input type="checkbox" name="mytexteditbox" value="checked" style="margin-left:auto; margin-right:auto;"> </td>
but didn't work. doing wrong?
update: here's test page. can please correct - css inline in html - checkboxes centered in 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>
i have accepted @hristo's answer - , here 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
how this... http://jsfiddle.net/gsapb/
check out 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; }
i hope helps.
Comments
Post a Comment