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>
    <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/

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>
    <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/

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

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:

<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.