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的主流瀏覽器識別的垂直居中的方法*/
                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://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

 

下面是個人公衆號，你們能夠關注一下，能夠一塊兒學習，一塊兒進步：