当前位置:Web前端 > css> 正文

css如何让浮动元素水平居中

时间:2015-8-5类别:Web前端

css如何让浮动元素水平居中

css如何让浮动元素水平居中

方式一

 

  •  
  • HTML 代码   复制
  • 
    <!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>
    <li class="wrap clearfix">
        <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>
    </li>
    
    </body>
    </html>
    
    
    		
  • 这里主要用到position:relative配合left:50%的技巧,父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%。

     

    方式二

     

  •  
  • HTML 代码   复制
  • 
    <!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; }
        .inwrap{ float:left; position:relative; left:50%;}
        .page { float:left; position:relative; left:-50%; }
        .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>
    <li class="wrap clearfix">
        <li 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>
        </li>
    </li>
    </body>
    </html>
    
    				
  • 父元素和子元

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐