css浮动的元素居中

最新推荐文章于 2023-11-01 17:56:27 发布

weixin_30311605

最新推荐文章于 2023-11-01 17:56:27 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/lst619247/p/8176259.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%。

转载于:https://www.cnblogs.com/lst619247/p/8176259.html

weixin_30311605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css浮动的元素居中

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>页面浮动元素的水平居中</title><style type="text/css">...
复制链接

扫一扫