宽度不固定元素水平居中

元素浮动以后不能通过text-align:center或是margin:0 auto达到居中效果，我们可以这样做是浮动元素居中：为父盒子和子盒子position: relative;然后父盒子left: 50%; 子盒子right:50%;就可以达到居中效果了。

另外如果元素不浮动如何达到居中效果呢。text-align:center;只能居中行内元素，但是往往我们需要居中一个块级盒子，其实也很简单：为父盒子设置text-align:center；为子盒子设置display:inline-block;就可以了，下面是demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面元素的水平居中</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 14px;
    }
    
    .clearfix:after {
        content: "";
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
    }
    
    a {
        text-decoration: none;
    }
    
    h1 {
        text-align: center;
        padding: 10px;
        font-size: 20px;
        margin: 30px 0;
    }
    
    .wrap {
        margin: 20px auto;
        padding: 10px 0;
        background: orange;
        overflow: hidden;
        position: relative;
    }
    /* 解决方案一 */
    .inwrap {
        float: left;
        position: relative;
        left: 50%;    
    }
    .page {
        float: left;
        position: relative;
        left: -50%;
    }
    /* 方案一结束 */

    /* 解决方案二 */
    .inwrap {
        text-align: center;
    }
    .page {
        display: inline-block;
    }
    /* 方案二结束 */

    .page li {
        float: left;
        margin: 0 5px;
    }
    
    .page li a {
        display: block;
        padding: 2px 9px;
        background: white;
        border: 1px solid red;
        float: left;
    }
    </style>
</head>

<body>
    <div class="wrap clearfix">
        <div class="inwrap">
            <ul class="page">
                <li> <a href="#">上一页</a> </li>
                <li> <a href="#">1</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">4</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">4</a> </li>
                <li> <a href="#">5</a> </li>
                <li> <a href="#">6</a> </li>
                <li> <a href="#">下一页</a> </li>
            </ul>
        </div>
    </div>
</body>
</html>

 

posted @ 2017-01-23 22:54  wmui  阅读(3486)  评论(0)  编辑  收藏  举报