浮动元素居中法

作者: ninja梅梅 | 来源:发表于2016-09-14 20:45 被阅读24次

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>