为了账号安全,请及时绑定邮箱和手机立即绑定

当我放大缩小网页的时候banner图会出现这种情况

http://img1.sycdn.imooc.com//575bd8d60001c04210910602.jpg

设置margin:0 auto;也不起作用,banner图不居中

正在回答

3 回答

我猜你应该是没在 reset.css 中设置 img{display:block}

不过没设置也没事,那img在默认css中就是inline元素了,这样你就不要在index.css的img设置 margin:0 auto;了,你可以img的父级元素也就是index-banner-bg中设置text-align:center就好了嘛,因为text-align:center就是针对这种inline元素居中的嘛

0 回复 有任何疑惑可以回复我~

我也是这个情况,不过不知道你是不是一样。

我发现我的footer和header的宽度是1500px(我们设置的),但是index-banner的宽度是1349px,又进一步发现body的宽度也是1349px,即body的宽度<你设置的header和footer的宽度,所以我尝试把body的宽度设置为1500px,就解决了。这个解决方法可能不正确,希望知道的人解释解释。我推断这个可能是浏览器的原因,我用的是火狐和谷歌的浏览器。

0 回复 有任何疑惑可以回复我~

如果你父级元素用了浮动的话,或者img 标签没有升级为display:block/inline-block;(包在图片的外层元素是个行间元素)margin:0px auto是不起作用的:解决办法:1:把图片的外层元素设置为块级元素,或者本身设置为display:block元素,在margin:0px auto;,若没有升级为块级元素,在外层,直接text-algin:center;也是可以的。2:或者用css3的盒模型可以解决:外层元素display:block/inline-block;(注意各个浏览器前面得加前缀:例如:谷歌:display:-webkit-block;等),box-pack:Center;

2 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

当我放大缩小网页的时候banner图会出现这种情况

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信