当前位置:  首页  >  前端开发  >  HTML

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

1、盒子模型问题:请CSS重置2、按钮不对齐:请浮动或者vertical-align:middle;然后计算宽高,使其对齐;3、IE8文本不居中:line-height属性  注意:IE8不支持font写法(或者某个样式不支持)IE浏览器测试到IE8,IE5、6、7慎用。问题原因:盒子模型1、盒子模型:在页面放2个input,一个text文本框,一个butt
1、盒子模型问题:请CSS重置

2、按钮不对齐:请浮动或者vertical-align:middle;然后计算宽高,使其对齐 ;

3、IE8文本不居中:line-height属性 注意:IE8不支持font写法(或者某个样式不支持)

IE浏览器测试到IE8,IE5、6、7慎用。

问题原因:盒子模型

1、盒子模型:

在页面放2个input,一个text文本框,一个button按钮(设置宽高,无任何其他样式)

input[type='text']{width:400px;height:45px;}

input[type='button']{width:45px;height:45px;}

观察:IE8:文本框border:1px;padding:2px;

按钮border:3px;padding:1px 8px;

火狐:文本框border:1px;padding:2px;

按钮border:3px;padding:0px 8px;

谷歌:文本框border:2px;padding:1px 0px;

按钮border:2px;padding:1px 6px;

添加样式,让border,padding一样

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

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

观察:

IE8:文本框border:1px;content:202x47 (IE的盒子模型)

按钮border:1px;content:45x45 (IE的盒子模型)

火狐:文本框border:1px;content:200x45

按钮border:1px;content:43x43

谷歌:文本框border:1px;content:200x45

按钮border:1px;content:43x43

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文字垂直居中和按钮对齐问题的实例教程的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有