html - 对齐标签下方的复选框？

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.

.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 演示。