主页 / 建站知识 /

实现div垂直居中的display:table-cell方法示例介绍

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设
ie7和ie6都不能识别 display: table-cell;（支持display: block等css1的属性！）
ie8以及以后版本可以识别！

ie7和ie6能识别vertical-align:middle;

如果盒模型中间只有几段文字的话，设置line-height就可以实现居中显示了！

如果要实现盒模型中的div居中，可以参考以下代码 
CSS Code复制内容到剪贴板
  1. div#wrap {    
  2. display: table;    
  3. border: 1px solid #FF0099;    
  4. background-color: #FFCCFF;    
  5. width: 760px;    
  6. height: 400px;    
  7. position: relative;    
  8. overflow: hidden;    
  9. }    
  10.   
  11. div#subwrap {    
  12. vertical-align: middle;    
  13. display: table-cell;    
  14. position: absolute;    
  15. : 50%;    
  16. }    
  17.   
  18. div#content {    
  19. position: relative;    
  20. : -50%;    
  21. }  
效果
 

这个是多浏览器兼容的，得写几层div~ 想在层或img在层中垂直水平居中该怎样做呢？下一篇会涉及到。
上一篇：三角形向下方向垂直翻转效果 下一篇：用CSS手写导航条没有任何图片附效果图

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by