单选按钮与文字绝对垂直居中的方法

很显然 这个问题已经困扰着我们很久 HTML下的input总是给我们带来无尽的烦恼 好在我们有强大的CSS

所以 也就应了那句话 兵来将挡 水来土掩

CSS部分:

body{
margin:20px;
font-size:12px;
}
.input{
float:left;
*margin:-1px 0;
}
span{
float:left;
margin-top:-3px;
}

HTML部分:

<div style="height:25px; line-height:25px; ">
<input type="radio" name="radiobutton" value="radiobutton" /><span>我肯定是和单选按钮垂直居中的</span>
</div>

当然 我在body里设置margin是为了看的方便 另外 这是字体在12px的情况下 如果是14px应该直接给radio来个vertical-align:middle就可以了

至于margin:-1px 0;是因为input在万恶的IE下上下都会多出1px的高度

Write a comment