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標籤元素了。
vertical-align屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表格單元格中,這個屬性會設定單元格框中的儲存格內容的對齊方式。
.box {
/*非IE的主流瀏覽器辨識的垂直置中的方法*/
vertical-align:middle;
/*設定水平居中*/
1
/* 針對IE的Hack */
175px;/*約為高度的0.873,200*0.873 約為175*/
*font-family:Arial;/*防止非utf-8造成的hack失效問題,如gbk編碼*/
width:200px;
border: 1px solid #eee;
}
/*設定圖片垂直居中*/
vertical-align:middle;
}