center-wrap板心的margin:0 auto;为什么不能实现盒子居中

center-wrap板心的margin:0 auto;为什么不能实现盒子居中

# 具体遇到的问题
老师,这里的center-wrap板心的margin:0 auto;为什么不能实现盒子居中了呢?这里有点不理解要用绝对定位去居中,margin:0 auto不是直接盒子居中了么?

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2022-04-27 11:36:10

同学你好,解答如下:

1、banner指的是这里?

https://img1.sycdn.imooc.com//climg/6268b58c09818b5b07280283.jpg

这里设置left:0;无意义,可以去掉。

2、第二和第三点不太理解同学的意思,这边简单解释一下:

center-wrap相对于banner进行定位,center-wrap固定宽度并设置了居中显示

https://img1.sycdn.imooc.com//climg/6268b9de0984ebbd16090794.jpg

banner-nav在center-wrap盒子中,默认从左侧显示,所以和center-wrap距离banner左侧一样

https://img1.sycdn.imooc.com//climg/6268ba0e09c55e0a16630786.jpg

如果没有解决同学的问题,建议描述具体一些。

祝学习愉快!

好帮手慕鹤 2020-11-12 14:43:19

同学你好,center-wrap整体是需要放在banner背景图片的上面,实现这个效果就需要用到定位;

但是使用了定位之后,元素脱离了文档流,直接使margin:0 auto;是不生效,它需要结合方位属性去设置,可以参考下图理解:

老师视频中只是讲解了其中一个使用定位实现水平居中的方式。

http://img1.sycdn.imooc.com//climg/5facd93e09c1324718890710.jpg

祝学习愉快!

  • 提问者 好帮手慕斯林 #1
    哦这样的,谢谢老师!
    2020-11-12 15:07:31
  • 1.老师  .banner .banner-nav  里left:50%,margin-left-576px;设置了水平居中了,怎么里面后来还加了left:0?啥意思

    2.还有,对版心还是不太懂,比如

    为什么给  .banner  这个当父相 相对定位就而且左边有效?不是给.banner .center-wrap(给.banner .center-wrap 加父相我试了下还真不对)?    

    3.而且这样的话   .banner .banner-nav  盒子把 .banner  盒子当父相,怎么离浏览器左边距离不是0,而是和版心离浏览器左边距离一样? 那这样不是是把版心 (.banner .center-wrap)当父相的效果吗?好乱,不懂


    搜索

    复制

    2022-04-26 23:49:21
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师