Align Check Box Below The Label?

I have the following HTML code for a check box: select Its out

Solution 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><tdclass="myClass"><label>
        Click me, to change Checkbox value !<br><inputtype="checkbox"id="one"name="delete"value="one"align=""></label></td></tr></table>

check it out http://jsfiddle.net/G7JxA/

Solution 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><tdclass="myClass"><span>select<span><inputtype="checkbox"id="one"name="delete"value="one"/></td></tr></table>

CSS

.myClass{
    width: 40px;
    display:block;
    text-align: center;
}

Working Examplehttp://jsfiddle.net/GSRGX/

Solution 3:

DEMO

Please check above demo.

.myClass gives text-align:center;

<table><tr><tdclass="myClass">
    select<br><inputtype="checkbox"id="one"name="delete"value="one"align=""></td></tr></table>

Solution 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:

<tdclass="myClass">
    select
    <br/><inputtype="checkbox"id="one"name="delete"value="one" /></td>

And the css:

#one {
position:relative;
left:12px;
}

I have made a JSFiddle demo.