本文介绍了解决网页中图片对齐及验证码布局问题的方法。主要包括：利用vertical-align属性调整图片位置，设置容器的height和line-height实现垂直居中，使用position属性优化验证码布局等。
最新解决方法
常用情况：
显示图片：
解决方法：
1
2 
3 设置成功，请牢记新的登陆密码
4
显示图片：
解决思路：
1.利用inline的vertical-align:middle属性(注意：这个属性只对inline和inline-block有效，对block无效)
2.后面的文字用inline元素包装起来，否则还是会错位
情况1：
1
2
3 
4 设置成功，请牢记新的登陆密码
5
显示图片：
解决方法：
设置成功，请牢记新的登陆密码
改变后图片：
解决思路：1.设置外面容器的height和line-height。
2.把显示图片的容易变为inline-block。
3.将图片设置为背景，注意left center，padding-left:(图片的宽度)；在显示文字。
情况2：
代码
1
2
3
4 验证码：
5
6
7 
8 验证码已发送!
9
10
11
当前效果为：
修改后的代码：
1
2
3 验证码：
4
5
6 
7 验证码已发送!
8
9
10
修改后的效果：
解决思路：1.设置外面容器的position:relative;
2.设置图片容器的position:absolute;并指明top：0px；
3.一定要记得margin-left;在图片的下一个标签，或者图片本身。
原文：http://www.cnblogs.com/vinpho/p/6498850.html
扫一扫
1137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
