實現(xiàn)任意圖片垂直居中的三種方法
作者：CNL
在網(wǎng)站開發(fā)過程中，可能會有希望圖片垂直居中的情況，而且，需要垂直居中的圖片的高度也不確定，這就會給頁面的布局帶來一定的挑戰(zhàn)。
在網(wǎng)站開發(fā)過程中，可能會有希望圖片垂直居中的情況，而且，需要垂直居中的圖片的高度也不確定，這就會給頁面的布局帶來一定的挑戰(zhàn)。我總結(jié)了一下，曾經(jīng)使用過的幾種方法來使圖片垂直居中，除了***種方法只限于標準瀏覽器外，另外兩種方法的兼容性還不錯。
方法一：
將外部容器的顯示模式設(shè)置成display:table，這個設(shè)置的意思不用多說了吧… img標簽外部再嵌套一個span標簽，并設(shè)置span的顯示模式為display:table-cell，這樣span內(nèi)部的內(nèi)容就相當于表格，可以很方便的使用vertical-align屬性來對齊其中的內(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#
方法二：
標準瀏覽器的情況還是和上面一樣，不同的是針對IE6/IE7利用在img標簽的前面插入一對空標簽的辦法。
代碼如下：
- <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標簽外包裹一個p標簽，標準瀏覽器利用p標簽的偽類屬性:before來實現(xiàn)居中，另外，對于IE6/IE7使用了CSS表達式來實現(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; /* 行高等于高度 */
- }
- /* 兼容標準瀏覽器 */
- #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表達式用來兼容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
責任編輯：張偉
來源：
CNL的博客
