开发者

How to align this checkbox

开发者 https://www.devze.com 2023-03-16 00:05 出处:网络
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

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?


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/


.checkbox {
    display: block;
    margin: auto;
}

Or you can set:

th {
    text-align: center;
}

And specify which class or id of <th> to include if you want the entire <th> to be centered, like: http://jsfiddle.net/minitech/pJxgc/.


try this one jsFiddle

    <table>
        <tbody>
            <tr><th><input type="checkbox" class="checkbox" />&nbsp;&nbsp;&nbsp;&nbsp;Hello</th></tr>
            <tr><td>My Table Data!</td></tr>
        </tbody>

    </table>

th { text-align: center; }


Do you mean something like this fiddle?

0

精彩评论

暂无评论...
验证码 换一张
取 消