图片水平居中显示实验
测试对于不同宽度图片以不同方法实现水平居中效果,以对以后居中需求提供参考。
测试准备:
PC浏览器chrome
PC浏览器宽度大概 1000px
宽度小的图片: 500px, http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg (感谢新华网贡献的妹子)
宽度大的图片: 1920px, http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg (很好看哦)
对容器设置text-align:center
此种方法:
居中效果对于宽度小于浏览器宽度的图片有效,对于大于浏览器宽度的图片显示左边部分;
缩小浏览器宽度, 小图片能够自动居中调节;
有水平滚动条,向右拖动,小图片不居中调节,向左边滚动。
<html> <head> </head> <body style="text-align:center"> <img src="http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg"/> <img src="http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg"/> </body> </html>
对图片设置margin:0 auto
此种方法,需要设置img标签为block模式,否则居中效果不生效:
居中效果对于宽度小于浏览器宽度的图片有效,对于大于浏览器宽度的图片显示左边部分;
缩小浏览器宽度, 小图片能够自动居中调节;
有水平滚动条,向右拖动,小图片不居中调节,向左边滚动。
实现效果同 text-align:center,但是此种效果是对元素,更加适合。
<html> <head> </head> <body> <img style="margin:0 auto; display: block;" src="http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg"/> <img style="margin:0 auto; display: block;" src="http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg"/> </body> </html>
margin-left:-图片一半宽度px
此方法利用相对定位思想,将图片通过left和margin定位居中。
小图片同上两个方法的效果。
大图片也可以起到居中的效果,但是对于两边不能显示的部分,左边的部分不能查看,右边的部分可以通过拖动水平滚动条查看。
缩放浏览器,大小图片都居中显示。
<html> <head> </head> <body> <img style="left:50%;margin-left:-250px; display: block; position: relative;" src="http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg"/> <img style="left:50%;margin-left:-960px; display: block;position: relative;" src="http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg"/> </body> </html>
给body加个隐藏属性,可以讲水平滚动条隐藏掉
<html> <head> </head> <body style="overflow:hidden;"> <img style="left:50%;margin-left:-250px; display: block; position: relative;" src="http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg"/> <img style="left:50%;margin-left:-960px; display: block;position: relative;" src="http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg"/> </body> </html>
通过类似手段,组合父对象,可以垂直和水平同时居中,见:
http://www.okajax.com/a/201105/css_div_pic.html
background 方式
此方法,将图片作为div的背景,使用背景的center属性
对于大小图片,都可以做到居中显示,缩放情况下也自动调节居中;
同时对于大图片,不会出现水平滚动条,宽度变大过程中, 两边不嫩能显示的内容逐步显示;
除了牺牲一些img语义,或者说可访问性, 其效果同上。
<html> <head> </head> <body> <div style="background:url('http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg') center no-repeat;height: 693px;"></div> <div style="background:url('http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg') center no-repeat;height: 693px;"></div> </body> </html>
相关文章
- 使用CSS设置背景图片,图片比较大,完全显示在一个DIV中
- css设置多张图片横向居中显示方法(亲测有效)
- Android 中向本地保存图片的时候,不在图库显示
- ASP.NET MVC下使用AngularJs语言(八):显示html
- RDLC报表显示存储于数据库的图片
- 使用vue-contextmenujs鼠标右键菜单时,当高度不够时显示不全的问题
- Android 自定义TextView实现文字和图片居中显示
- Eclipse中servlet显示无法导入javax.servlet包问题的解决方案
- 如何在VS2013中显示代码行号
- Dynamics CRM 自定义上传附件的图片悬浮层显示
- MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白
- SDL2源码分析8:视频显示总结
- Myeclipse它显示了一个目录的结构,而不是包
- Cocos2d-x初入学堂(7)-->win32显示中文乱码解决方法
- 【ARM】2440裸机系列-图片显示
- Scrollview嵌套RecyclerView滑动冲突和底部显示不全的问题
- android Imageview 显示本地绝对路径图片
- 让div自适应浏览器窗口居中显示
- vc 加载bmp位图并显示的方法
- android 文字叠加显示在图片之上控件的实现 -- 充分利用TextView
- Django - 解决页面显示的时间和数据库中存储的时间不一致的问题
- 【idea系列】问题之右下角不显示版本分支