今天项目中出现了一个checkbox不能对齐的问题，检查良久，发现出现的原因是因为checkbox被设置了高度为24px导致文字和checkbox不能对齐，做了几次测试后总结如下:
1 checkbox 和radio两个标签的默认高宽都是13px，但是在Firefox和IE中 margin和padding的默认值不一样，因此必须先统一设置margin和padding为0
2 checkbox 和radio如果被设置了高度，那么高度越高，垂直居中的偏差就越大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>垂直居中</title>
<style type="text/css">
label{height:13px;}
</style>
</head>
<body>
<table >
<tr>
<td height="50px ">
<input id="1" type="checkbox" style="margin:0px;padding:0px
" />
<label for="1">默认高度垂直居中</label>
</td>
</tr>
<tr>
<td height="50px ">
<input id="1" type="checkbox" style="height:48px;margin:0px;padding:0px
" />
<label for="1">设置高度垂直居中</label>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
`vertical-align`用于设置元素在行内的垂直对齐方式。在表格单元格、`<span>`、`<input>`等行内元素中，`vertical-align`尤其有用。在我们的示例中，`vertical-align: middle;`用于将元素的垂直中心线与行的中间对齐...
2. **设置`vertical-align`属性**：使用`vertical-align: middle`属性可以使checkbox和文字在垂直方向上居中对齐。这一步至关重要，因为它能确保在不同浏览器下的对齐一致性。示例代码如下： ```html ...
vertical-align 属性用于设置元素的垂直对齐方式，可以取值为 baseline、sub、super、top、text-top、middle、bottom、text-bottom 等。 在我们的示例代码中，我们使用了 vertical-align: middle; 来设置 input 和 ...
为了解决这个问题，我们可以采用CSS样式调整的方法来实现checkbox在单元格内的垂直居中对齐。 首先需要了解的是，Layui是一个基于jQuery的前端UI框架，它提供了丰富的界面组件，如表格、弹窗、按钮等，这些组件通过...
然而，在IE6和IE7中，可能还需要进行特定的浏览器hack，比如在这里，可能需要将单选框的垂直对齐调整为`*vertical-align: -1px`，复选框调整为`*vertical-align: -2px`，以确保在这些浏览器中的效果与标准浏览器一致...
/* 以下针对IE7和IE6的垂直对齐修正 */ *vertical-align: 1px; } ``` 在HTML结构方面，我们可以使用以下示例： ```html <input type="checkbox" name="checkbox4" id="checkbox4" class="form_checkbox"> ...
最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使...
一般来说，当复选框放置在td中时，复选框默认的垂直对齐方式可能并不是居中，而是基线对齐（baseline）。基线对齐是HTML中的默认行为，此时复选框的下边框会与td内文字的基线对齐，从而导致复选框看起来并不居中。...
`vertical-align`用于定义行内元素在行框中的垂直对齐方式。默认情况下，行内元素如`input`、`select`和`label`等，它们的基线会按照各自的基线对齐，这可能会导致对齐不一致。 正确的做法是，在样式表中定义`input...
2. 设置图片的`display`属性为`block`，这是因为默认的img元素是内联元素，而内联元素的垂直对齐并不直观。 3. 使用`vertical-align: middle`属性来实现图片的垂直居中。 具体的CSS代码如下： ```css td { text-...
在这个项目中，Flexbox可能用于控制复选框在容器中的排列方式，如水平居中、垂直对齐或者响应式布局，确保在不同设备和屏幕尺寸下都能保持良好的视觉效果。 最后，JavaScript作为客户端脚本语言，负责处理用户与...
对于流式布局，需要考虑子视图的对齐方式（左对齐、右对齐等）。 3. `addView()`：添加子视图时，需要更新行信息，以便在布局时正确处理换行。 在实现“热门标签”功能时，我们通常会用CheckBox作为子视图。...
4. **使用`line-height`和`vertical-align`**：另一种解决方法是通过设置`line-height`和`vertical-align`属性来调整元素的垂直对齐。例如，可以将`line-height`设置为与复选框高度相等的值，并将`vertical-align`...
在CSS世界中，`vertical-align`属性是一个相当关键但又常常被误解的属性，它用于控制行内元素或表格单元格元素的垂直对齐方式。本文将深入探讨`vertical-align`，并解答一些常见问题。 首先，让我们明确`vertical-...
- **Checkbox**：将字段设为复选框，适用于布尔类型的字段。 - **Just**：设置字段的对齐方式，如左对齐（L）、右对齐（R）、居中对齐（C）。 - **Lzero**：前导零的处理，决定是否在数值前添加零。 - **No_sign**：...
` 属性确保了复选框与旁边的文本能够垂直居中对齐。 最后，通过JavaScript来实现点击复选框时切换背景图片的功能。由于jQuery 1.9版本之后不再支持`.toggle()`方法，因此需要使用原生JavaScript进行操作。在此例中...