亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

實(shí)現(xiàn)div垂直居中的display:table-cell方法示例介紹

  發(fā)布時間：2014-07-24 15:35:51   作者：佚名   我要評論
要實(shí)現(xiàn)盒模型中的div居中，可以使用display:table-cell方法且兼容多瀏覽器，下面有個示例，感興趣的朋友可以練練手
ie7和ie6都不能識別 display: table-cell;（但是支持display: block等css1的屬性！）
ie8以及以后版本可以識別！

ie7和ie6能識別vertical-align:middle;

如果盒模型中間只有幾段文字的話，設(shè)置line-height就可以實(shí)現(xiàn)居中顯示了！

如果要實(shí)現(xiàn)盒模型中的div居中，可以參考以下代碼： 
CSS Code復(fù)制內(nèi)容到剪貼板
  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. *top: 50%;    
  16. }    
  17.   
  18. div#content {    
  19. *position: relative;    
  20. *top: -50%;    
  21. }  
效果：
 

這個是多瀏覽器兼容的，但是得寫幾層div~ 但是想在層或img在層中垂直水平居中該怎樣做呢？下一篇會涉及到。

相關(guān)文章

最新評論