實(shí)現(xiàn)任意圖片垂直居中的三種方法

作者：CNL 2012-06-20 13:46:23

在網(wǎng)站開發(fā)過程中，可能會(huì)有希望圖片垂直居中的情況，而且，需要垂直居中的圖片的高度也不確定，這就會(huì)給頁面的布局帶來一定的挑戰(zhàn)。

在網(wǎng)站開發(fā)過程中，可能會(huì)有希望圖片垂直居中的情況，而且，需要垂直居中的圖片的高度也不確定，這就會(huì)給頁面的布局帶來一定的挑戰(zhàn)。我總結(jié)了一下，曾經(jīng)使用過的幾種方法來使圖片垂直居中，除了***種方法只限于標(biāo)準(zhǔn)瀏覽器外，另外兩種方法的兼容性還不錯(cuò)。

方法一：

將外部容器的顯示模式設(shè)置成display:table，這個(gè)設(shè)置的意思不用多說了吧… img標(biāo)簽外部再嵌套一個(gè)span標(biāo)簽，并設(shè)置span的顯示模式為display:table-cell，這樣span內(nèi)部的內(nèi)容就相當(dāng)于表格，可以很方便的使用vertical-align屬性來對(duì)齊其中的內(nèi)容了。

代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    <title>方法1 - 未知高度的圖片垂直居中 - www.cleanthem.com</title>  
<style type="text/css">  
body {  
    height:100%;  
}  
#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]-->  
</head>  
<body>  
<div id="box">  
    <span><img src="images/demo_zl.png" alt="" /></span>  
</div>  
</body>  
</html>

演示地址

#p#

方法二：

標(biāo)準(zhǔn)瀏覽器的情況還是和上面一樣，不同的是針對(duì)IE6/IE7利用在img標(biāo)簽的前面插入一對(duì)空標(biāo)簽的辦法。

代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>方法2 - 未知高度的圖片垂直居中 - www.cleanthem.com</title> 
 
<style type="text/css"> 
body {  
    height:100%;  
}  
#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]--> 
</head> 
<body> 
<div id="box"> 
    <i></i><img src="images/demo_zl.png" alt="" /> 
</div> 
 
</body> 
</html>

演示地址

#p#

方法三：

在img標(biāo)簽外包裹一個(gè)p標(biāo)簽，標(biāo)準(zhǔn)瀏覽器利用p標(biāo)簽的偽類屬性:before來實(shí)現(xiàn)居中，另外，對(duì)于IE6/IE7使用了CSS表達(dá)式來實(shí)現(xiàn)兼容。

代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>方法3 - 未知高度的圖片垂直居中 - www.cleanthem.com</title> 
 
<style type="text/css"> 
body {  
    height:100%;  
}  
#box{  
    width:500px;height:400px;  
    text-align:center;  
    border:1px solid #d3d3d3;background:#fff;  
}  
#box p{  
    width:500px;height:400px;  
    line-height:400px;  /* 行高等于高度 */  
}  
 
/* 兼容標(biāo)準(zhǔn)瀏覽器 */  
#box p:before{  
    content:".";  /* 具體的值與垂直居中無關(guān)，盡可能的節(jié)省字符 */  
    margin-left:-5px; font-size:10px;  /* 修復(fù)居中的小BUG */  
    visibility:hidden;  /*設(shè)置成隱藏元素*/  
}  
 
#box p img{  
    *margin-top:expression((400 - this.height )/2);  /* CSS表達(dá)式用來兼容IE6/IE7 */  
    vertical-align:middle;  
    border:1px solid #ccc;  
}  
</style> 
</head> 
<body> 
<div id="box"> 
    <p><img src="images/demo_zl.png" alt="" /></p> 
</div> 
</body> 
</html>

演示地址

原文鏈接：http://www.cnblogs.com/cnliu/archive/2012/06/20/image-center.html

責(zé)任編輯：張偉來源： CNL的博客

CSS