方法一 (XHTML 1.0 transitional)：

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

HTML結(jié)構(gòu)部分：

<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)：

方法二和方法一的實(shí)現(xiàn)的原理大同小異，結(jié)構(gòu)也是相同的，方法一用的是條件注釋，方法二就用的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; /*針對(duì)IE6/7的Hack*/ top:50%; /*針對(duì)IE6/7的Hack*/ } #box img { position:static; *position:relative; /*針對(duì)IE6/7的Hack*/ top:-50%;left:-50%; /*針對(duì)IE6/7的Hack*/ border:1px solid #ccc; } </style> ? 該方法有個(gè)弊端，在標(biāo)準(zhǔn)瀏覽器下由于外部容器#box的顯示模式為display:table-cell，所以導(dǎo)致#box無(wú)法使用margin屬性，并且在IE8下設(shè)置邊框也無(wú)效。

方法三 (XHTML 1.0 strict)：

標(biāo)準(zhǔn)瀏覽器還是將外部容器#box的顯示模式設(shè)置為display:table-cell，IE6/IE7是利用在img標(biāo)簽的前面插入一對(duì)空標(biāo)簽的辦法。

HTML結(jié)構(gòu)部分：

<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]-->

網(wǎng)頁(yè)題目：圖片真正居中的方法
標(biāo)題鏈接：http://jinyejixie.com/news10/309210.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、用戶體驗(yàn)、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)