這是一個(gè)未知大小的圖片在一個(gè)已知大小容器中的水平和垂直居中的例子，原文標(biāo)題：“Centering an image of unknown size in an outer container of known size”， 作者：Stu Nicholls form：http://www.cssplay.co.uk/menu/centered.html ，發(fā)表日期：15th October 2006。

此文由forestgan于2006-10-17翻譯發(fā)表，更多文章。

這個(gè)水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, NETscape，為IE和非IE分別寫(xiě)了二套簡(jiǎn)單的樣式。

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>

作者的例子是單個(gè)的，我擴(kuò)展了下，一頁(yè)6張圖片，可適用于像冊(cè)和產(chǎn)品展示等地方，演示地址。

HTML/CSS技術(shù)：轉(zhuǎn)載未知大小的圖片在一個(gè)已知大小容器中的水平和垂直居中（二），轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。