html+css--水平居中总结-不定宽块状元素方法（三）

来源：http://www.imooc.com/code/6365

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

举例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<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;}


/*下面是代码任务区*/
.wrap{
    clear:both;
    float:left;
    position:relative;
    left:50%;
}
.wrap-center{
    background:#ccc;
    position:relative;
    margin:0;
    left:-50%;
    
}
</style>
</head>

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

<!--下面是代码任务区-->
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>

结果如下图：

posted @ 2016-05-29 18:54  琴吖  阅读(1054)  评论(0)  编辑  收藏  举报