黑松山资源网

使用CSS居中浮动元素的方法
站长资源 2024/9/20 佚名
2 0
黑松山资源网 Design By www.paidiu.com

方法一

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距

CSS Code复制内容到剪贴板
  1.  div{   
  2.         width:500px;   
  3.         height:300px;   
  4.         margin:-150px 0 0 -250px;   
  5.         position:absolute;   
  6.         left:50%;   
  7.         top:50%;   
  8.         background-color:#000;   
  9. }  

方法二

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html><html><head>   
  2.     <title>Demo</title>   
  3.     <meta charset="utf-8"/>   
  4.     <style type="text/css">   
  5.         .p{   
  6.             position:relative;   
  7.             left:50%;   
  8.             float:left;   
  9.         }   
  10.         .c{   
  11.             position:relative;   
  12.             float:left;   
  13.             rightright:50%;   
  14.         }   
  15.     </style></head><body>   
  16.     <div class="p">   
  17.         <h1 class="c">Test Float Element Center</h1>   
  18.     </div>   
  19. </body>   
  20. </html>  
黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com