display:table- cell屬性的練習

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;
                }