Align check box below the label? - html

Question

I have the following HTML code for a check box:
<td class="myClass">
select<br><input type="checkbox" id="one" name="delete" value="one">
</td>
Its output is as below:
but I want the checkbox to be displayed exactly below the label, like so:
select
[]
How can I do that?

Answer 1

Just add style text-align:center; and display:block; to the container.
Good tip: (maybe you know it) If the container of the label and checkbox wll be <label>, the input share click event with the container. For examle:
<table>
<tr>
<td class="myClass">
<label>
Click me, to change Checkbox value !<br>
<input type="checkbox" id="one" name="delete" value="one" align="">
</label>
</td>
</tr>
</table>
check it out http://jsfiddle.net/G7JxA/

Answer 2

Add a span tag around the text, then assign a width and text-align:center to both the span and input.
HTML
<table>
<tr>
<td class="myClass">
<span>select<span>
<input type="checkbox" id="one" name="delete" value="one"/>
</td>
</tr>
</table>
CSS
.myClass{
width: 40px;
display:block;
text-align: center;
}
Working Example http://jsfiddle.net/GSRGX/

Answer 3

DEMO
Please check above demo.
.myClass gives text-align:center;
<table>
<tr>
<td class="myClass">
select<br><input type="checkbox" id="one" name="delete" value="one" align="">
</td>
</tr>
</table>

Answer 4

If you set position as relative for your checkbox, you can move it around with left:, right:, top:, bottom:.
The html code would look like this:
<td class="myClass">
select
<br/>
<input type="checkbox" id="one" name="delete" value="one" />
</td>
And the css:
#one {
position:relative;
left:12px;
}
I have made a JSFiddle demo.