主頁 > 知識庫 > 轉(zhuǎn)載未知大小的圖片在一個已知大小容器中的水平和垂直居中(二)

轉(zhuǎn)載未知大小的圖片在一個已知大小容器中的水平和垂直居中(二)

熱門標簽:移動400辦理電話 上古卷軸5地圖標注mod 蘇州通信外呼系統(tǒng)多少錢 北川縣地圖標注 沈陽智能外呼系統(tǒng)排名 中國地圖標注各省份 武漢人工外呼系統(tǒng) 山西旅游景地圖標注 荒野大鏢客2地圖標注怎么變中文

這是一個未知大小的圖片在一個已知大小容器中的水平和垂直居中的例子,原文標題:“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ā)表,更多文章。

這個水平和垂直居中的例子能正常工作在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)品展示等地方,演示地址。

標簽:海東 東莞 遼源 陽泉 邯鄲 南充 喀什 濱州

巨人網(wǎng)絡(luò)通訊聲明:本文標題《轉(zhuǎn)載未知大小的圖片在一個已知大小容器中的水平和垂直居中(二)》,本文關(guān)鍵詞  轉(zhuǎn)載,未知,大,小的,圖片,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《轉(zhuǎn)載未知大小的圖片在一個已知大小容器中的水平和垂直居中(二)》相關(guān)的同類信息!
  • 本頁收集關(guān)于轉(zhuǎn)載未知大小的圖片在一個已知大小容器中的水平和垂直居中(二)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章