如何對未知高度的圖片設定垂直置中

這篇文章主要介紹了對未知高度的圖片設定垂直置中的方法詳解,實踐時特別留意一下IE瀏覽器中的顯示情況,需要的朋友可以參考下

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

但是實際在瀏覽器中實現起來的效果並不是很完美，由於各瀏覽器的解析都各不相同，所以在各瀏覽器都會有1px-3px的偏差。
方法一：

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

<p id="box"><span><img src="images/demo.jpg" alt="" /></span></p>

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

方法二：

方法二和方法一的實現的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。
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;   }

該方法有個弊端，在標準瀏覽器下由於外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，並且在IE8下設定邊框也無效。
方法三：

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

HTML代碼

<p id="box">    <i></i><img src="images/demo.jpg" alt="" /></p>

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

方法四：

在img標籤外包裹一個p標籤，標準瀏覽器利用p標籤的偽類屬性:before來實現，IE6/IE7使用了CSS運算式來實現相容。
HTML代碼

<p id="box">    <p><img src="images/demo.jpg" alt="" /></p></p>

CSS代碼

#box{       width:500px;height:400px;       text-align:center;       border:1px solid #d3d3d3;background:#fff;   }   #box p{       width:500px;height:400px;       line-height:400px; /* 行高等於高度 */}   /* 相容標準瀏覽器 */#box p:before{       content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具體的值與垂直置中無關，儘可能的節省字元 */    margin-left:-5px; font-size:10px; /* 修複置中的小BUG */    visibility:hidden; /*設定成隱藏元素*/}   #box p img{       *margin-top:expression((400 - this.height )/2); /* CSS運算式用來相容IE6/IE7 */    vertical-align:middle;       border:1px solid #ccc;   }

使用:beforr這個方法對於標準瀏覽器來說比較給力，也沒發現有副作用，但是對於IE6/IE7，如果對效能要求較高的話CSS運算式的方法要慎用。
方法五：

該方法針對IE6/IE7，將圖片外部容器的字型大小設定成高度的0.873倍就可以實現置中，標準瀏覽器還是使用上面的方法來實現相容，並且結構也是比較優雅。
HTML代碼

<p id="box">    <img src="images/demo.jpg" alt="" /></p>

CSS代碼

#box{       width:500px;height:400px;       text-align:center;       border:1px solid #d3d3d3;background:#fff;       /* 相容標準瀏覽器 */    display: table-cell;    vertical-align:middle;       /* 相容IE6/IE7 */    *display:block;       *font-size:349px; /* 字型大小約為容器高度的0.873倍 400*0.873 = 349 */    *font-family:Arial; /* 防止非utf-8引起的hack失效問題，如gbk編碼 */}   #box img{       vertical-align:middle;   }

設定字型大小的方法感覺比較怪異，也沒有看到一個合理的解釋，只知道圖片元素有一些不同於其他元素的特性，但是對於IE6/IE7來說，這個方法還是比較給力的。
思考：很多方法都是依賴於將外部容器的顯示模式設定成table才能實現垂直置中，也就是p來類比table，如果CSS有一個屬性來實現這種效果那該多好。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！