如何对齐复选框和标签？

Question

  

可能重复：
  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>

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

Answer 1

如果所有内容都是一行，则可以使用line-height属性：

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

Answer 2

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

或任何vertical-align属性