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

使不定宽块状元素水平居中-第三种方法

除了前两节讲到的插入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层的居中。

 

代码如下:

</head>

    <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>

</head>


<body> 

    <div>     

        <ul>         

            <li><a href="#">1</a></li>         

            <li><a href="#">2</a></li>         

            <li><a href="#">3</a></li>     

        </ul> 

    </div> 

</body>




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

完全懵了。有谁能帮帮我??尤其是读了这段话之后,我的脑袋都转不动了。。

正在回答

1 回答

.container   {  

                float:left;    

                 position:relative;     

                left:50% 

        } 

把父级整体离开左边50%就是让父级的最左边在屏幕中心

  .container ul  {    

                 list-style:none;     

                margin:0;     

                padding:0;          

                position:relative;     

                left:-50%;


然后让子级像左移动-50%就是让子级的一半向父级的左边切出,这样子级的中心正好在屏幕的中心了

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

老王哥哥 提问者

非常感谢!
2016-07-30 回复 有任何疑惑可以回复我~
#2

只吃红烧牛肉面

但是ul最左端为什么在中心线 而li却超出了父元素ul块的范围
2016-08-08 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

使不定宽块状元素水平居中-第三种方法

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号