display:table-cell屬性指讓標簽元素以表格單元格的形式呈現，類似于td標簽。目前IE8+以及其他現代瀏覽器都是支持此屬性的，但是IE6/7只能對你說sorry了，這一事實也是大大制約了display:table-cell屬性在實際項目中的應用。

我們都知道，單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關聯伸縮等，所以display:table-cell還是有不少潛在的使用價值的，雖說IE6/7不支持此屬性，但是幸運的是，IE6/7一些亂糟糟的屬性與渲染，我們可以其他方法實現同樣或是類似的效果。

與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性盡量不用同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫脫的一個td標簽元素了。

使用display:table-cell讓大小不固定元素垂直居中已經是很老的方法了，關于此應用，我已經在“大小不固定的圖片、多行文字的水平垂直居中”這篇文章中有過介紹。

方便閱讀，這里再次展示下代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表