經(jīng)常用的圖片在容器中的水平垂直居中實例_javascript技巧

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:37:18

經(jīng)常用的圖片在容器中的水平垂直居中實例_javascript技巧

經(jīng)常用的圖片在容器中的水平垂直居中實例_javascript技巧:這是一個未知大小的圖片在一個已知大小容器中的水平和垂直居中的例子，原文標題:Centering an image of unknown size in an outer container of known size。這個水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox,

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀經(jīng)常用的圖片在容器中的水平垂直居中實例_javascript技巧:這是一個未知大小的圖片在一個已知大小容器中的水平和垂直居中的例子，原文標題:Centering an image of unknown size in an outer container of known size。這個水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox,

這是一個未知大小的圖片在一個已知大小容器中的水平和垂直居中的例子，原文標題:“Centering an image of unknown size in an outer container of known size”。
　　這個水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape，為IE和非IE分別寫了二套簡單的樣式。

　　IE使用inline-blocks，非IE使用table-cell and vertical-align。

　　CSS代碼：

以下是引用片段：
/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}

　　xhtml代碼：