首頁  >  文章  >  web前端  >  轉載未知大小的圖片在一個已知大小容器中的水平和垂直居中(二)_經驗交流

轉載未知大小的圖片在一個已知大小容器中的水平和垂直居中(二)_經驗交流

WBOY
WBOY原創
2016-05-16 12:09:241657瀏覽

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

此文由forestgan於2006-10-17翻譯發表,更多文章

這個水平和垂直居中的例子能正常工作在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;}
}<br><!--[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"><br><span id="edge"></span> <br><span id="container"><img src="graphics/homework.jpg" alt="" /></span><br></div><br>

作者的例子是單一的,我擴展了下,一頁6張圖片,可適用於像冊和產品展示等地方,演示地址

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn