經(jīng)常用的圖片在容器中的水平垂直居中實例
更新時間：2007年06月10日 00:00:00 作者：
這是一個未知大小的圖片在一個已知大小容器中的水平和垂直居中的例子，原文標題:“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;}
}
<!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->
xhtml代碼：
<div class="holder">
<span id="edge"></span>
<span id="container"><img src="graphics/homework.jpg" alt="" /></span>
</div>
作者的例子是單個的，我擴展了下，一頁6張圖片，可適用于像冊和產(chǎn)品展示等地方，查看演示
form:http://www.cssplay.co.uk/menu/centered.html
這個水平和垂直居中的例子能正常工作在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;}
}
<!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->
xhtml代碼：
<div class="holder">
<span id="edge"></span>
<span id="container"><img src="graphics/homework.jpg" alt="" /></span>
</div>
作者的例子是單個的，我擴展了下，一頁6張圖片，可適用于像冊和產(chǎn)品展示等地方，查看演示
form:http://www.cssplay.co.uk/menu/centered.html
相關(guān)文章
數(shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實現(xiàn))
下面小編就為大家?guī)硪黄獢?shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實現(xiàn))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
下面小編就為大家?guī)硪黄狫S獲得一個對象的所有屬性和方法實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文通過實例給大家介紹了PHP7新特性的相關(guān)知識，需要的朋友參考下吧2017-06-06
本篇文章主要介紹了js樹形控件—zTree使用總結(jié)，樹形控件的使用是應用開發(fā)過程中必不可少的。zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點.2016-12-12
JavaScript中通過提示框跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了JavaScript中通過提示框跳轉(zhuǎn)頁面的方法的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細介紹了JavaScript BOM操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
JavaScript 嚴格模式(use strict)用法實例分析
這篇文章主要介紹了JavaScript 嚴格模式(use strict)用法,結(jié)合實例形式分析了JavaScript 嚴格模式的基本功能、用法及操作注意事項,需要的朋友可以參考下2020-03-03
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法,簡單介紹了雙向鏈表的原理,并結(jié)合實例形式分析了雙向鏈表的定義與使用方法,需要的朋友可以參考下2017-10-10
本文主要介紹了V8實現(xiàn)字符串拼接，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
利用Promise自定義一個GET請求的函數(shù)示例代碼
這篇文章主要給大家介紹了關(guān)于如何利用Promise自定義一個GET請求的函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Promise具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03