老师,请问这里上下左右都设定为0和margin设为0 auto具体的含义是什么?

老师,请问这里上下左右都设定为0和margin设为0 auto具体的含义是什么?

正在回答

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

1回答

同学你好,

(1)margin:0 auto;是设置元素水平居中显示的,例如:

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

auto实现居中显示。在正常文档流中,如果垂直方向上也改为auto,实现不了垂直居中:

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

(2)在定位中有一种方式叫做拔河效应,设置4个方向位置为0,例如水平方向,既想让元素在左侧显示,又想让元素在右侧显示,这时候设置了margin值为auto,那么这个元素最后就居中显示了。例如:

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

自己可以测试理解下,祝学习愉快!

  • 慕少7337496 提问者 #1
    意思就是,设置上下为0,让元素上下的移动互相抵消,设置左右为0,让元素左右的移动互相抵消,设置上下和左右都为auto就是让它保持互相抵消的状态最后就是居中显示?是这样吗?
    2019-09-16 21:54:43
  • 好帮手慕星星 回复 提问者 慕少7337496 #2
    你好,是可以这样理解的哦。
    2019-09-17 09:27:58
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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