猿问

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

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

方法三:通过给父元素设置 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层的居中。


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


老王哥哥
浏览 1406回答 4
4回答

qyy2499760117_叶子

你就记住一人一边就得了。

随风逐流

ul移到了中间 ul的最左端和父容器中线对齐 这时由于ul有宽度,所以整体是偏右的,偏了一半的ul的宽度li往左回移一半的宽度,平分线到了正中间的位置,也就是 “ul的最左端”以后又不懂得,可以先关注我。和我私聊也是可以的!尽量帮你解决问题。

人笨嫌刀钝

ul移到了中间 ul的最左端和父容器中线对齐 这时由于ul有宽度,所以整体是偏右的,偏了一半的ul的宽度li往左回移一半的宽度,平分线到了正中间的位置,也就是 “ul的最左端”
随时随地看视频慕课网APP
我要回答