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

最新推荐文章于 2023-09-24 01:51:21 发布

麦客子

最新推荐文章于 2023-09-24 01:51:21 发布

阅读量4.7k

点赞数 2

对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。

方法一：

1、HTML 部分：

 
        <div class= 
        "box" 
        > 
       
        <p>我是浮动的</p> 
       
        <p>我也是居中的</p> 
       
        </div>

2、CSS 部分：

 
         .box{ 
        
         float:left; 
        
         position:relative; 
        
         left:50%; 
        
         } 
        
         p{ 
        
         float:left; 
        
         position:relative; 
        
         right:50%; 
        
         }

这样看来就很简单了吧，父元素和子元素同时左浮动，然后父元素相对左移动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> 
       
        <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>

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%。

方法三：

html代码

 
        <!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; }  
       
        .clearfix { zoom:1; }  
       
        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%; }  
       
        .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>  
       
        <h1>页面元素的水平居中</h1>  
       
        <h2>浮动方式：</h2>  
       
        <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>