如何对齐复选框和标签标签？ [复制]

Posted 2023-02-22

【中文标题】如何对齐复选框和标签标签？ [复制]

【英文标题】：How to align checkbox and label tag? [duplicate]

【发布时间】：2012-03-11 22:21:44

【问题描述】：

可能重复：How to align checkboxes and their labels consistently cross-browsers

我有这个代码：

<div id="form-footer">
    <ul>
       <li>
           <label for="test">Label text</label> 
           <input type="checkbox" name="" value="" id="test" />
       </li>
    </ul>
</div>

如何对齐标签和复选框？目前我看到复选框相对于标签在顶部对齐，我想在中间看到它。

【参考方案1】：

如果一切都是单行的，你可以使用 line-height 属性：

#form-footer li  height: 30px; line-height: 30px; /** same as height */ 

【参考方案2】：

​input[type=checkbox]  vertical-align: middle; ​

或任何vertical-align 属性