html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

css中使input输入框与img(图片)在同一行居中对齐_CSS教程_CSS_网页制作

[ ] 已经帮助:人解决问题
点评:如何让input输入框与img在同一行居中对齐,由于经常会使用到,默认情况下将input和img放同一行,img标签总是比input高出一个头,很难看,大家可以参考下本文或许有所帮助

将input和img放同一行,img标签总是比input高出一个头,难看。后来在网站搜到最多的就是给img添加一个align="absmiddle"属性,这个方法似乎的确可行,但是不符合HTML标准。后来发现同时给input和img添加vertical-align:middle就行:PVGHTML5中文学习网 - HTML5先行者学习网

在写css时,使得input和img在同一行居中对齐的方法:PVGHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
PVGHTML5中文学习网 - HTML5先行者学习网
img{vertical-align:middle;}PVGHTML5中文学习网 - HTML5先行者学习网
PVGHTML5中文学习网 - HTML5先行者学习网
input{width:宽度;height:高度;line-height:与高度一致;margin:0px;padding;0px;font-size:字体大小;border:边框;vertical-align:center;}PVGHTML5中文学习网 - HTML5先行者学习网

或直接这样写PVGHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
PVGHTML5中文学习网 - HTML5先行者学习网
input,img{vertical-align:middle;}PVGHTML5中文学习网 - HTML5先行者学习网
PVGHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助