DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 實現div垂直居中的display:table-cell方法示例介紹
實現div垂直居中的display:table-cell方法示例介紹
編輯:布局實例     

   ie7和ie6都不能識別 display: table-cell;(但是支持display: block等css1的屬性!)

  ie8以及以後版本可以識別!

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

  如果盒模型中間只有幾段文字的話,設置line-height就可以實現居中顯示了!

  如果要實現盒模型中的div居中,可以參考以下代碼:

  div#wrap {

  display: table;

  border: 1px solid #FF0099;

  background-color: #FFCCFF;

  width: 760px;

  height: 400px;

  *position: relative;

  overflow: hidden;

  }

  div#subwrap {

  vertical-align: middle;

  display: table-cell;

  *position: absolute;

  *top: 50%;

  }

  div#content {

  *position: relative;

  *top: -50%;

  }

  效果:

實現div垂直居中的display:table-cell方法示例介紹

  這個是多浏覽器兼容的,但是得寫幾層div~ 但是想在層或img在層

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved