首頁 > web前端 > html教學 > display:table- cell屬性的練習

display:table- cell屬性的練習

WBOY
發布: 2016-08-10 08:49:43
原創
1095 人瀏覽過

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

 

 
display:table- cell屬性的練習


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板