Search code examples
htmlcsscss-tables

How to align this checkbox


I have a table an done column is just checkboxes.

In the <th> I have a prompt "include?" and would now like to add some JS for a checkbox in that <th>, with maybe some "all/none" text.

Bad ascii art follows:

------------             ------------
| include? |             | include? |
|   []     |             |   [] all |
------------             ------------
|   []     |  or, maybe  |   []     |
------------             ------------
|   []     |             |   []     |
------------             ------------

in either case, what style should I use to centre that checkbox?


Solution

  • Easiest is with text-align:center;

    http://jsfiddle.net/jasongennaro/rhUjP/1/

    EDIT

    Just saw your other requirements, namely I need the text to be left aligned, but the checkbox to be centered

    In that case, put the input in a span

    span{display:inline-block; text-align:center; width:100px;}
    

    Have the width match the width of the th.

    http://jsfiddle.net/jasongennaro/rhUjP/3/