CSS 使用margin:0 auto让图片居中方法 display:block+margin:0 auto让图片居中

admin 4个月前 214浏览 0评论

应该都知道让一个div元素进行居中,最快的办法就是使用margin:0 auto(前提是div存在定宽值),然后只针对一个图片如何居中呢?为什么对图片直接使用margin:0 auto居中会失败呢?

比如: img{width:200px; margin:0 auto;}

此时图片不会居中!

原因:

因为此时图片是inline行内水平元素,就算没有width,其也不会占据整个容器,而maigin:auto是填充剩余空间,没有剩余空间可填,所以无效!

解决方法:

图片居中.png CSS 使用margin:0 auto让图片居中方法 display:block+margin:0 auto让图片居中 CSS学习

此时因为加入了block,会让img填充整个空间,所以就有剩余空间可操作,此时margin:auto才会起作用!


评论