首页新闻招聘找找看知识库

CSS一个简单的问题,大神进来轻松拿分!

0
悬赏园豆:30 [已解决问题]

这个水平居中是怎么实现的?还是没有理解啊,这个父元素left:50%和子元素left:50%到底是怎么偏移的啊,正50%是相对父亲元素向右偏移吧,那么这个是怎么实现居中的?求大佬画图解释下!

 

水平居中总结-不定宽块状元素方法(三)

除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的方法,设置浮动和相对定位来实现。

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

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

 

代码如下:

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码:

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

 

这个水平居中是怎么实现的?还是没有理解啊,这个父元素left:50%和子元素left:50%到底是怎么偏移的啊,正50%是相对父亲元素向右偏移吧,那么这个是怎么实现居中的?求大佬画图解释下!

Lawliet__zmz的主页 Lawliet__zmz | 初学一级 | 园豆:110
提问于:2017-08-12 11:34
< >
分享
最佳答案
0

收获园豆:30
一座城你说你不懂 | 菜鸟二级 |园豆:375 | 2017-08-12 12:00

container相对上级body右移了50%,
ul相对上级container左移了50%,
就是上面的情况吧,

一座城你说你不懂 | 园豆:375 (菜鸟二级) | 2017-08-12 12:02
其他回答(2)
0

楼上的图没毛病,首先你需要理解relative。

relative是相较于dom本身定位。

而父元素的float的作用是使父元素脱离文档流,也就是说在忽略body的影响下使父元素的left: 0,top: 0;

此时在结合relative你应该就能明白为什么50%之后,dom处于居中状态了

好来污影后 | 园豆:467 (菜鸟二级) | 2017-08-16 10:57
0
苏黎世宝贝 | 园豆:274 (菜鸟二级) | 2017-08-16 22:12
   您需要登录以后才能回答,未注册用户请先注册