码迷,mamicode.com
首页 > 其他好文 > 详细

不定宽 块状元素居中3

时间:2017-03-02 00:19:50      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:ati   实现   lis   通过   float   code   pos   one   margin   

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

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

 

 

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


.container ul{      子元素
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;}



浮动和相对定位
使不定宽块状元素居中

不定宽 块状元素居中3

标签:ati   实现   lis   通过   float   code   pos   one   margin   

原文地址:http://www.cnblogs.com/sherlockone/p/6486917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!