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

2017-09-12 19:01 出处:360java.com 作者:360java  阅读()
这个水平居中是怎么实现的?还是没有理解啊,这个父元素left:50%和子元素left:50%到底是怎么偏移的啊,正50%是相对父亲元素向右偏移吧,那么这个是怎么实现居中的?求大佬画图解释

这个水平居中是怎么实现的?还是没有理解啊,这个父元素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%是相对父亲元素向右偏移吧,那么这个是怎么实现居中的?求大佬画图解释下!

< >
最佳答案

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

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

分享到:
本文标签: CSS, CSS3, HTML, 前端, JavaScroptCS

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) java学习 360java 360java.com, All Rights Reserved.

苏ICP备16022210号