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?
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" /> Hello</th></tr>
<tr><td>My Table Data!</td></tr>
</tbody>
</table>
th { text-align: center; }
Do you mean something like this fiddle?
精彩评论