为什么设置了-25%后,并没有居中,只是在left:50%的基础上变宽而已

为什么设置了-25%后,并没有居中,只是在left:50%的基础上变宽而已

    .test{

     width: 800px;

     height: 100px;

     background: red;

     /*此处写代码*/

     position:fixed;

     top:0;

     left:50%;

     margin-left:-25%;

   }


正在回答

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

3回答

您好,这个与浏览器本身的宽度有关系,不同的浏览器窗口宽度可能是不一样的,提示中之所以将div框的left设置为50%,再使用margin-left将div块左移25%,是因为div块设置好的宽度800px正好是浏览器宽度的50%,因此这样做最后能够居中,如果800px在您的浏览器中是大于浏览器总宽度的50%,这样操作之后,整个div框实际上是相对靠右的。您应该做的修改如下:

http://img1.sycdn.imooc.com/climg//59bdebec0001fcfe02920341.jpg

将width属性修改为50%。

如果解决了您的问题,请采纳,祝学习愉快~

  • 慕桂英6468770 提问者 #1
    非常感谢!
    2017-09-17 17:00:25
  • 向左偏移应该设置为 test的一半 800*0.5=400px,而25%=1600*0.25=400px实则是在页面宽度恰好1600px时,有点投机!如果页面宽度2000px呢?
    2018-02-24 12:01:51
慕丝3243066 2017-09-16 14:24:35

色块宽度是800px,一半就是400px,将margin-left=-400px,即向左移动了div块一半的距离。如果解决您的问题请采纳,祝学习愉快!

好帮手慕查理 2017-09-15 23:36:00

您好,我们这边测试是可以的,请您反馈您完整的代码,以及您使用的浏览器。我们测试时使用是谷歌、IE浏览器。祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
PHP小白零基础入门
  • 参与学习           人
  • 提交作业       626    份
  • 解答问题       4930    个

想要学好Web后端开发的中流砥柱语言,本阶段为你轻松铺就扎实的基础,从前端网页布局的搭建到后台PHP开发,助你从零基础到掌握主流开发语言。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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