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>

结果如下图：

巴特西

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

最新文章

热门文章