在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。
将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。
| | <html xmlns="http://www.w3.org/1999/xhtml"> |
| | <head> |
| | <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
| | <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</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" /></span> |
| | </div> |
| |
| | </body> |
| | </html> |
标准浏览器的情况还是和上面一样，不同的是针对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.nowamagic.net</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" /> |
| | </div> |
| |
| | </body> |
| </html> |
在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。
| | <html xmlns="http://www.w3.org/1999/xhtml"> |
| | <head> |
| | <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
| | <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</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:"."; /* 具体的值与垂直居中无关，尽可能的节省字符 */ |
| | 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; |
| | } |
| | </style> |
| |
| </head> |
| |
| | <body> |
| <div id="box"> |
| | <p><img src="images/demo_zl.png" /></p> |
| | </div> |
| |
| | </body> |
| | </html> |
新闻热点
疑难解答
