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

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

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

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

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

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

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


当前回答

我认为这是最简单的方法

输入{位置:相对;顶部:1px;}<表单><div><label><input-type=“checkbox”/>标签文本</label></div><表单>

其他回答

谢谢!这也一直让我发疯。

在我的特殊情况下,这对我很有用:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

我正在使用reset.css,这可能会解释一些差异,但这似乎对我很有用。

有时垂直对齐需要两个相邻的内联(span、label、input等)元素才能正常工作。以下复选框在IE、Safari、FF和Chrome中垂直居中,即使文本大小很小或很大。

它们都在同一行上彼此相邻浮动,但nowrap意味着整个标签文本始终保持在复选框旁边。

缺点是额外的无意义SPAN标签。

复选框标签{显示:内联块;右侧填充:10px;空白:nowrap;}复选框输入{垂直对齐:中间;}复选框标签跨度{垂直对齐:中间;}<表单><div class=“checkbox”><label><inputtype=“checkbox”><span>标签文本x</span></label><label><input-type=“checkbox”><span>标签文本y</span></label><label><input-type=“checkbox”><span>标签文本z</span></label></div></form>

现在,如果您有一个非常长的标签文本需要在复选框下换行而不换行,那么您可以在标签元素上使用填充和负文本缩进:

复选框标签{显示:块;右侧填充:10px;向左填充:22px;文本缩进:-22px;}复选框输入{垂直对齐:中间;}复选框标签跨度{垂直对齐:中间;}<表单><div class=“checkbox”><label><input-type=“checkbox”><span>给文本x加上很长的标签,使其可能会换行,让我们看看它如何与建议的CSS(预期:两行很好地对齐)</span></label><label><input-type=“checkbox”><span>标签文本y</span></label><label><input-type=“checkbox”><span>标签文本z</span></label></div></form>

现在,所有现代浏览器都支持flexbox,这样的方式对我来说似乎更简单。

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

以下是完整的前缀版本演示:

标签{显示:-webkit框;显示:-webkit flex;显示:-ms flexbox;显示:柔性;-webkit框对齐:居中;-webkit对齐项目:中心;-ms flex align:中心;对齐项目:居中;}输入[类型=无线电],输入[类型=复选框]{-webkit box flex:0;-webkit flex:无;-ms flex:无;flex:无;右边距:10px;}/*仅演示(显示对齐)*/表单{最大宽度:200px}<表单><标签><input-type=“radio”checked>我是一个对齐的电台和标签</label><标签><input-type=“checkbox”已选中>我是一个对齐的复选框和标签</label></form>

在Chrome28OSX中,我选择了400+支持率的答案,这对我来说并不适用,可能是因为它没有在OSX中进行测试,或者在2008年回答这个问题时,它确实适用。

时代已经改变,新的CSS3解决方案现在是可行的。我的解决方案使用伪元素创建自定义复选框。因此,规定(无论你怎么看,是赞成还是反对)如下:

仅适用于现代浏览器(FF3.6+、IE9+、Chrome、Safari)依赖于自定义设计的复选框,该复选框将在每个浏览器/操作系统中呈现完全相同。这里我只是选择了一些简单的颜色,但你可以总是添加线性渐变,这样可以让它更具冲击力。调整为特定的字体/字体大小,如果更改,您只需更改复选框的位置和大小,使其看起来垂直对齐。如果调整正确,最终结果在所有浏览器/操作系统中应该仍然接近完全相同。无垂直对齐财产,无浮动在我的示例中必须使用所提供的标记,如果结构像问题一样,它将不起作用,但是,布局基本上看起来是一样的。如果您想四处移动,还必须移动关联的CSS

div.复选框{位置:相对;字体系列:Arial;字体大小:13px;}标签{位置:相对;向左填充:16px;}标签::之前{内容:“”;显示:内联块;宽度:10px;高度:10px;背景色:白色;边框:实心1px#9C9C9C;位置:绝对;顶部:1px;左:0px;}标签::之后{内容:“”;宽度:8px;高度:8px;背景色:#666666;位置:绝对;左:2px;顶部:3px;显示:无;}输入[类型=复选框]{可见性:隐藏;位置:绝对;}input[类型=复选框]:选中+标签::之后{显示:块;}输入[类型=复选框]:活动+标签::之前{背景色:#DDDDD;}<表单><div class=“checkbox”><input id=“check_me”type=checkbox/><label for=“check_me”>复选框的标签</label></div></form>

此解决方案隐藏复选框,并将伪元素添加到标签并设置其样式,以创建可见的复选框。由于标签与隐藏的复选框绑定,因此输入字段仍将更新,值将随表单一起提交。

如果你感兴趣,这里是我对单选按钮的看法:http://jsfiddle.net/DtKrV/2/

希望有人觉得这很有用!

这对我来说很好:

字段集{文本对齐:左侧;边框:无}字段集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>