css实现input、checkbox垂直居中

转自：http://www.ghugo.com/css-to-achieve-input-checkbox-vertical-center/

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

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

为input框定义这样的css

帮助

1 2 3 4 5 6

.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 和文字居中，可以用这段代码试试：

帮助

1 2 3 4

/*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 ;}

帮助

1 2 3 4

< div class = "input_middle" > < input name = "test" value = "1" type = "checkbox" > < label >测试文字x</ label > </ div >

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