首页 > 其他 > 详细

设置图片位于div正中间

时间:2019-05-02 12:56:43      阅读:349      评论:0      收藏:0      [点我收藏+]

最忌总结了几种居中图片的方法,跟大家分享一下,有什么总结不到位的还请大神多多指点。

1、利用弹性布局居中图片,兼容IE9以上浏览器

<div style="width: 400px;height: 400px;background-color: blue;display: flex;align-items: center;justify-content: center;">
			<img src="img/develop.png" style="width: 100px;height: 100px;background-color: red;" />
		</div>
align-items: center;表示垂直居中,justify-content: center;表示水平居中。

2、兼容IE8的居中方式

<div style="width: 400px;height: 400px;background-color: blue;line-height: 440px;text-align: center;">
			<img src="img/develop.png" style="width: 100px;height: 100px;background-color: red;margin: 0 auto;" />
		</div>

3、兼容IE6的居中方式

<div style="width: 400px;height: 400px;background-color: blue;position: relative;">
			<img src="img/develop.png" style="width: 100px;height: 100px;background-color: red;display: inline-block;position: absolute;top: 50%;left:50%;margin-top: -50px;margin-left: -50px;" />
		</div>

  

设置图片位于div正中间

原文:https://www.cnblogs.com/luo-chen/p/10801963.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!