对齐标签下方的复选框？

Question

我有一个复选框的以下HTML代码：

<td class="myClass">
    select<br><input type="checkbox" id="one" name="delete" value="one">
</td>

其输出如下：

但我希望复选框正好显示在标签下方，如下所示：

     select
       []

我该怎么做？

Answer 1

只需将样式text-align:center;和display:block;添加到容器中即可。

好提示（也许你知道）如果标签和复选框的容器将是<label>，则输入共享点击事件与容器。例如：

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

查看http://jsfiddle.net/G7JxA/

Answer 2

在文字周围添加span标记，然后为text-align:center和span分配宽度和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;
}

工作示例 http://jsfiddle.net/GSRGX/

Answer 3

<强> DEMO

请检查上方demo.

.myClass提供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

如果您将复选框的位置设置为相对位置，则可以使用left：，right：，top：，bottom：。

移动它。

html代码如下所示：

<td class="myClass">
    select
    <br/>
    <input type="checkbox" id="one" name="delete" value="one" />
</td>

和css：

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

我做了JSFiddle demo。