欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

ie7和ie6能識(shí)別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. }  
效果：
 

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

相關(guān)文章

最新評(píng)論