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

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -