display:table- cell屬性的練習，table-cell

display:table- cell屬性的練習，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的主流瀏覽器識別的垂直置中的方法*/
                display: table-cell;
                vertical-align:middle;
                /*設定水平置中*/
                text-align:center;
                /* 針對IE的Hack */
                *display: block;
                *font-size: 175px;/*約為高度的0.873，200*0.873 約為175*/
                *font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/
                width:200px;
                height:200px;
                border: 1px solid #eee;
                }
            .box img {
                /*設定圖片垂直置中*/
                vertical-align:middle;
                }   <div class="box">
<img src="http://www.bkjia.com/uploads/allimg/160809/16304132Z-0.jpg" />
</div>