css实现input、checkbox垂直居中

先说input,这里说的input垂直居中,是指input内部文字的居中。

input 框在各种浏览器效果一样的解决法案:

为input框定义这样的css

.inputText{
font-size:12px;
height:14px;
padding:5px;
line-height:15px;
}

则input的高度最后为26px;

下面解释

height为字体大小加2px,line-height为height加1px。input框最后的高度则为height加padding-top加padding-bottom加2

想要什么样的高度就在字体的基础上改变height跟padding的值就可以。效果经测试在ie7 firefox chrome上一样,ie6上效果不太好但能接受。

这个应该也算不用css hack之外的一个比较不错的办法。

至于checkbox 和文字居中,可以用这段代码试试:

/*input vertical middle*/
.input_middle{font-family:tahoma;}
.input_middle label{vertical-align:middle; cursor:pointer}
.input_middle input{vertical-align:middle; margin-right:3px;}
<div class="input_middle">
<input name="test" value="1" type="checkbox">
<label>测试文字x</label>
</div>

扩展阅读:基于vertical-align的表单元素垂直对齐方式研究

发表评论

电子邮件地址不会被公开。 必填项已用*标注