好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

分享input文字垂直居中和按钮对齐问题的实例教程

1、盒子模型问题:请CSS重置

2、按钮对齐方法:浮动 (原因是Offset不同没有搜索更多的知识,可以自己补充这方面的知识);

input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button']{width:45px;height:45px;border:1px solid red;padding:0;float:left;}

参考第2步, 自行计算宽高,使其对齐 (有的可能没有border,用的背景色代替,请设置border:0;高度自行调整)
input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button']{width:47px;height:47px;border:1px solid red;padding:0;float:left;}

3、IE8文本居中:line-height 注意 IE8不支持font写法

将font:normal 18px "微软雅黑";换成font-size:18px;font-style:normal;font-family:"微软雅黑"!

或者(这样可以用font:normal 18px "微软雅黑";写法,但是有点不是在正中间)
input[type='text']{width:400px;height:25px;padding:10px 0px;border:1px solid red;float:left;}
input[type='button']{width:47px;height:47px;line-height: 47px;border:1px solid red;padding:0;float:left;}

以上就是分享input文字垂直居中和按钮对齐问题的实例教程的详细内容,更多请关注Gxl网其它相关文章!

查看更多关于分享input文字垂直居中和按钮对齐问题的实例教程的详细内容...

  阅读:50次