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

水平居中_方法三中关于-50%问题

在本节给定的理论如下说:

方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐。

我想清楚这个相对左移-50%到底是什么意思?给定的解释是通过给子层设置 position:relative 和 left: -50% 就可以将子层的最左端与其父层的水平线对齐,那是怎么实现的呢?


正在回答

1 回答

ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。

1 回复 有任何疑惑可以回复我~
#1

qq_途经_0 提问者

谢谢,不过你说的这个在本节的讲解里就涉及到了,我想知道的是ul层的css样式 position:relative 和 left: -50%是怎么实现将ul层的最左端与ul层的父层(div层)的平分线对齐的。
2017-04-17 回复 有任何疑惑可以回复我~
#2

堕落天宇

这我。。。哈哈
2017-04-18 回复 有任何疑惑可以回复我~
#3

淪陥 回复 qq_途经_0 提问者

首先父层div被设置了float浮动,在没有设置宽度的时候,默认是以其包含的文本或者图片的长度为其宽度,即和ul层是等长的.其次ul层position:relative即相对于div为基准浮动,并且是50%即div宽度的50%,这样不就平分了吗.
2017-05-04 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1226345    人
  • 解答问题       18239    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

水平居中_方法三中关于-50%问题

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