这是困扰我的CSS小问题之一。

Stack Overflow周围的人如何在浏览器中始终垂直对齐复选框及其标签?

每当我在Safari中正确对齐它们(通常在输入上使用垂直对齐:基线),它们在Firefox和IE中就完全关闭了。

在Firefox中修复它,Safari和IE不可避免地被搞砸了。我每次编写表单时都在这上面浪费时间。

以下是我使用的标准代码:

<表单><div><label><input-type=“checkbox”/>标签文本</label></div></form>

我通常使用埃里克·迈耶的重置,所以表单元素相对来说没有覆盖。期待您提供的任何提示或技巧!


当前回答

输入[类型=复选框]{垂直对齐:中间;} <input id=“testCheckbox”name=“testCheckbox”type=“checkbox”><label for=“testCheckbox”>我应该对齐</label>

其他回答

这对我来说很好:

字段集{文本对齐:左侧;边框:无}字段集ol、字段集ul{填充:0;列表样式:无}字段集li{衬垫底部:1.5em;float:无;清除:左侧}标签{浮动:左侧;宽度:7em;右边距:1em}字段集复选框li{清晰:两者都有;衬垫:.75em}字段集复选框标签{边距:0 0 0 1em;宽度:20em}fieldset.checkboxes输入{浮动:左侧}<表单><fieldset class=“checkbox”><ul><li><input type=“checkbox”name=“happy”value=“yep”id=“happy“/><label for=“happy”>快乐</标签></li><li><input type=“checkbox”name=“饥饿”value=“yep”id=“饥饿”/>饿了吗</标签></li></ul></fieldset></form>

我通常使用线条高度来调整静态文本的垂直位置:

标签{线条高度:18px;}输入{宽度:13px;高度:18px;字体大小:12px;线条高度:12px;}<表单><div><label><input-type=“checkbox”/>标签文本</label></div></form>

希望这会有所帮助。

最简单的解决方案是

输入{垂直对齐:文本顶部;}

如果您使用ASP.NET Web表单,则无需担心DIV和其他元素或固定大小。我们可以通过将float:left设置为CSS中的CheckBoxList输入类型来对齐<asp:CheckBoxList>文本。

请检查以下示例代码:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX代码:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

也许有些人也犯了和我一样的错误?这是。。。我为输入框设置了一个宽度,因为它们大多是“文本”类型,但后来忘记了覆盖复选框的宽度,所以我的复选框试图占据大量多余的宽度,因此很难在旁边对齐标签。

.checkboxlabel {
    width: 100%;
    vertical-align: middle;
}
.checkbox {
    width: 20px !important;
}
<label for='acheckbox' class='checkboxlabel'>
    <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>

早在IE6(使用类选择器)以及Firefox、Safari和Chrome的最新版本中,提供了可点击的标签和正确的对齐方式