2-12编程练习

2-12编程练习

老师,请问为什么给test类设置left:50%  margin-left:400px之后,能够使得红色区域居中显示,想不明白。

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

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

3回答
好帮手慕糖 2017-10-18 16:34:18

你好,在定位的情况下,实现水平居中,有个规律哟。即:设置left:50%,然后就设置margin-left:-自身宽度的一半,即可实现水平居中。

而这里,-400这个值是根据.test元素(就是红色区域)决定的哟。

祝学习愉快~

  • 提问者 慕雪1434180 #1
    好的,谢谢老师。后面课程里面讲到了,我理解了,谢谢老师的耐心讲解!
    2017-10-18 21:17:02
小丸子爱吃菜 2017-10-17 15:52:52

如果浏览器宽度是1200px,设置离左边50%,那元素就是离浏览器左边600px,再设置margin-left:-400px,是负的400px,它就会往左挪了。

  • 提问者 慕雪1434180 #1
    那老师,这个-400可以理解为是根据浏览器的宽度和红色区域而决定的吗?而margin-left设置为红色区域的一半是一种巧合,比如,如果浏览器宽度是1500px,那我就可以设置margin-left为-250px,而并不是红色区域的一半?
    2017-10-18 14:30:05
小丸子爱吃菜 2017-10-17 13:55:36

设置left为50%后,元素的最左边会距离页面最左边50%,这样肯定是不居中的,需要再减去它自身宽度的一半,才能居中,你可以写下代码试试,先不设置margin-left,先设置left:50%,看下元素在哪。

祝学习愉快!

  • 提问者 慕雪1434180 #1
    老师,还是有一点不清楚,我已经调试过了,很纳闷,为什么左移本身宽度的400px,当设置为离左边50%时,根据浏览器宽度的默认值,它应该是已经超出浏览器宽度了,为啥是400px?谢谢老师
    2017-10-17 15:46:35
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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