水平居中总结-不定宽块状元素方法(三)
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下:
<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> </body>
css代码:
<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>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrap{
float:left;//<strong>块元素不那么长,变得适应文字的长度了</strong>
position:relative;
left:50%;//<strong>右移父元素宽的50%</strong>
background-color:rgba(229,60,55,0.5);
}
.wrap-center{
background-color:rgba(73,172,72,0.5);
position:relative;
left:-50%;//<strong>左移父元素宽的50%</strong>
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>
父元素left:50% 左边留出50%;
子元素 left:-50% ,由于块元素不设宽 默认是父元素内的100%宽度,所以和父元素重合,宽为50%,再左移50%,相当于移原来位置的50%,
这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。
这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。