码迷,mamicode.com
首页 > Web开发 > 详细

css中图片使用绝对定位实现居中效果

时间:2016-12-30 12:00:17      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:中间   使用   方案   绝对定位   div   负数   效果   存在   line   

存在问题

问题如标题所说,咱们在给图片设置绝对定位的时候就会遇到无法居中图片的问题。怎么解决?margin:0 auto?

很显然这个时候设置margin是无效的。

解决方案

假设咱们的图片宽度为100px;那我们就这么写:

position:absolute;

left:50%;

margin-left:-50px; (此处margin-left的值写该图片宽度的一半)

 

解释:

1、使用绝对定位,设置left值将图片移到正中间,此时图片的左边框在屏幕的中线位置

2、设置margin-left,注意值为负数,咱们把图片向左移图片宽度一半的位置

 

这样我们的问题就解决了~

css中图片使用绝对定位实现居中效果

标签:中间   使用   方案   绝对定位   div   负数   效果   存在   line   

原文地址:http://www.cnblogs.com/nelly0213/p/6236104.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!