|
|
這個水平和垂直居中的例子能正常工作在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張圖片，可適用于像冊和產品展示等地方，查看演示
form:http://www.cssplay.co.uk/menu/centered.html
JavaScript技術：經常用的圖片在容器中的水平垂直居中實例，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
