                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

关于元素居中问题

假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

这句话什么意思，我想象不出来

慕田峪9304305

2018-05-02

源自：初识HTML(5)+CSS(3)-升级版 15-7

关注问题我要回答

1431

操作

收起

3 回答

慕盖茨9358327 回答被采纳 +2 积分
2018-05-03

Yes

0 回复有任何疑惑可以回复我~

收起回答

慕田峪9304305 提问者

非常感谢！

2018-05-05 回复有任何疑惑可以回复我~

慕盖茨9358327
2018-05-02

结合图分析

0 回复有任何疑惑可以回复我~

收起回答

慕田峪9304305 提问者

ul此时在div未偏移时的中间是什么意思，，，，老是想不明白，，，ul是div的内容，div向右偏移一半，就是ul像右偏移一半，此时ul应该也在中分线中间啊

2018-05-03 回复有任何疑惑可以回复我~

慕盖茨9358327 回复慕田峪9304305 提问者

对，ul是在中间平分线开始显示，ul的左端就在中间平分线上。

2018-05-03 回复有任何疑惑可以回复我~

慕田峪9304305 提问者回复慕盖茨9358327

我自己画个图，差不多明白了，其实这个div向右偏移就是ul向右偏移一半然后ul左边与中分线重合，再将ul向左平移一半，也就是li在中分线中间，这样就实现了水平居中

2018-05-03 回复有任何疑惑可以回复我~

查看1条回复

慕盖茨9358327
2018-05-02

我刚开始也看不明白，但是我画成图形之后就理解了。

首先是父层div，它是设置了相对定位（left:50%;）向右偏移了50%（也就是div原本的中间“平分线”就在这），ul层就会在所谓的中间“平分线”开始往右显示内容。

然后ul层设置了相对定位（left:-50%;）向右偏移了-50%（也就是退回一半），这样做法是把ul里的内容li层的左半边放在"平分线"左边，右半边放在“平分线”的右边。

这样就实现了li层居中在未位移的父层div的中间（水平居中）。

希望能为你解惑！

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

收起回答

慕田峪9304305 提问者

当div relative定位向右偏移50%，那ul也向右偏移50%啊，然后ul向右偏移-50%也就是向左偏移50%，等于是回来了，那整个ul不就是在中分线的左边吗，我就是这里搞不清楚，然后li也是同样的道理，请兄弟能说清楚点

2018-05-02 回复有任何疑惑可以回复我~

慕盖茨9358327 回复慕田峪9304305 提问者

这里的相对定位移动的是它包含的内容（子元素），是div的内容向右偏移一半，ul（ul是div的内容）此时在div（未偏移时）的中间， ul的内容向左偏移一半（这里是ul的内容指li层，）li层此时就会在平分线往左移动ul层的一半位置的地方显示，也就是li层的内容会在div（未偏移时）的中间分一半在左分一半在右。这里就是它为什么不直接使用div层偏移（left:25%;），它没有定义宽度的原因。

2018-05-02 回复有任何疑惑可以回复我~

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226213 人
解答问题 18236 个

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

进入课程

本课相似问答

1 回答关于css设置行内元素的居中问题？？？

2 回答关于定宽块状元素居中

2 回答块状元素居中问题

7 回答内联元素的居中问题

1 回答定宽块状元素居中问题

搜索更多本课相关问答

关于元素居中问题

我要回答关注问题

热搜

最近搜索清空

关于元素居中问题

3 回答

本课相似问答

关于元素居中问题