当前位置:清晨 » 站长笔记 » CSS让文字、图片及input单行水平对齐的简单方法

CSS让文字、图片及input单行水平对齐的简单方法

发布日期:2012年11月20日 10:11:05 点击量: 7,405

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

CSS单行图文水平垂直对齐方法:

CSS样式:
div img,div input{ vertical-align:middle}

HTML代码:
<div>
<label>姓名:</label><input typt="text" /><img src="xxx.jpg" width=50 height=20 alt="验证码" />
</div>

<div>
<img src="xxx.jpg" alt="注册" /> <a href="#">取回密码"</a>
</div>

这时只要我们给图片加上垂直对齐的属性,后面的文字连接会相应的与图片水平对齐,即: img{     vertical-align:middle;}。当垂直对齐属性为“top“的时候,文字链与图片顶部水平对齐,如次类推。

如果是input与文字链放在一起,在ff和ie7、ie8中文字链都与图片顶部水平对齐,但是在ie6中却是底部对齐,同样我们可以给input添加垂直对齐属性来达到各个浏览器显示效果


关键词:

本文网址:https://www.menglei.info/845/,转载请以链接形式注明出处,谢谢合作!

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725

发表评论

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