首页 > 代码库 > css中图片使用绝对定位实现居中效果
css中图片使用绝对定位实现居中效果
存在问题
问题如标题所说,咱们在给图片设置绝对定位的时候就会遇到无法居中图片的问题。怎么解决?margin:0 auto?
很显然这个时候设置margin是无效的。
解决方案
假设咱们的图片宽度为100px;那我们就这么写:
position:absolute;
left:50%;
margin-left:-50px; (此处margin-left的值写该图片宽度的一半)
解释:
1、使用绝对定位,设置left值将图片移到正中间,此时图片的左边框在屏幕的中线位置
2、设置margin-left,注意值为负数,咱们把图片向左移图片宽度一半的位置
这样我们的问题就解决了~
css中图片使用绝对定位实现居中效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。