圖片真正居中的方法

方法一 (XHTML 1.0 transitional)：

該方法是將外部容器的顯示模式設置成display:table，img標簽外部再嵌套一個span標簽，并設置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這只是在標準瀏覽器下，IE6/IE7還得使用定位。

HTML結構部分：

<div id="box"> ??? <span><img src="images/demo.jpg" alt=""></span> </div> ? CSS樣式部分：

<style type="text/css"> #box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff; } #box span{ display:table-cell; vertical-align:middle; } #box img{ border:1px solid #ccc; } </style> <!--[if lte IE 7]> <style type="text/css"> #box{ position:relative; overflow:hidden; } #box span{ position:absolute; left:50%;top:50%; } #box img{ position:relative; left:-50%;top:-50%; } </style> <![endif]--> ? 方法二 (XHTML 1.0 transitional)：

方法二和方法一的實現的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。

CSS樣式部分：

<style type="text/css"> #box{ width:500px;height:400px; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3;background:#fff; } #box span{ position:static; *position:absolute; /*針對IE6/7的Hack*/ top:50%; /*針對IE6/7的Hack*/ } #box img { position:static; *position:relative; /*針對IE6/7的Hack*/ top:-50%;left:-50%; /*針對IE6/7的Hack*/ border:1px solid #ccc; } </style> ? 該方法有個弊端，在標準瀏覽器下由于外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，并且在IE8下設置邊框也無效。

方法三 (XHTML 1.0 strict)：

標準瀏覽器還是將外部容器#box的顯示模式設置為display:table-cell，IE6/IE7是利用在img標簽的前面插入一對空標簽的辦法。

HTML結構部分：

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div> ? CSS樣式部分：

<style type="text/css"> #box{ width:500px;height:400px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3;background:#fff; } #box img{ border:1px solid #ccc; } </style> <!--[if IE]> <style type="text/css"> #box i { ??? display:inline-block; ??? height:100%; ??? vertical-align:middle ??? } #box img { ??? vertical-align:middle ??? } </style> <![endif]-->

網頁題目：圖片真正居中的方法
標題鏈接：http://m.kartarina.com/news10/309210.html

成都網站建設公司_創新互聯，為您提供網站排名、用戶體驗、外貿網站建設、移動網站建設、手機網站建設、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯