浮动元素居中法
2016-09-14 本文已影响24人
ninja梅梅
1.现代浏览器浮动元素居中
text-align:center;
display:inline-block;
2.兼容ie6的浮动元素居中法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
.clearfix:after {}{ content:""; height:0; visibility:hidden; display:block; clear:both; }
.clearfix {}{ zoom:1; }
.wrap {}{ margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
/**//** relative left 50% */
.page {}{ float:left; position:relative; left:50%; }
/**//** relative right 50% */
.page li {}{ float:left; position:relative; right:50%; overflow:hidden; margin:0 5px; }
</style>
</head>
<body>
<div class="wrap clearfix">
<ul class="page">
<li> 上一页</li>
<li>1 </li>
<li>2</li>
<li>3</li>
<li>下一页 </li>
</ul>
</div>
</body>
</html>
