在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。
方法一
将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。
01 | <html xmlns= "http://www.w3.org/1999/xhtml" > |
02 | <head> |
03 | <meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> |
04 | <title>方法 1 - 未知高度的图片垂直居中 - www.nowamagic.net</title> |
05 | <style type= "text/css" > |
06 | body { |
07 | height : 100% ; |
08 | } |
09 | #box{ |
10 | width : 500px ; height : 400px ; |
11 | display :table; |
12 | text-align : center ; |
13 | border : 1px solid #d3d3d3 ; background : #fff ; |
14 | } |
15 | #box span{ |
16 | display : table-cell ; |
17 | vertical-align : middle ; |
18 | } |
19 | #box img{ |
20 | border : 1px solid #ccc ; |
21 | } |
22 | </style> |
23 | <!--[if lte IE 7 ]> |
24 | <style type= "text/css" >? |
25 | #box{ |
26 | position : relative ; |
27 | overflow : hidden ; |
28 | } |
29 | #box span{ |
30 | position : absolute ; |
31 | left : 50% ; top : 50% ; |
32 | } |
33 | #box img{ |
34 | position : relative ; |
35 | left : -50% ; top : -50% ; |
36 | } |
37 | </style> |
38 | <![endif]--> |
39 |
40 | </head> |
41 |
42 | <body> |
43 | <div id= "box" > |
44 | <span><img src= "images/demo_zl.png" alt= "" /></span> |
45 | </div> |
46 |
47 | </body> |
48 | </html> |
方法二
标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
01 | <html xmlns= "http://www.w3.org/1999/xhtml" > |
02 | <head> |
03 | <meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> |
04 | <title>方法 2 - 未知高度的图片垂直居中 - www.nowamagic.net</title> |
05 |
06 | <style type= "text/css" > |
07 | body { |
08 | height : 100% ; |
09 | } |
10 | #box{ |
11 | width : 500px ; height : 400px ; |
12 | display : table-cell ; |
13 | text-align : center ; |
14 | vertical-align : middle ; |
15 | border : 1px solid #d3d3d3 ; background : #fff ; |
16 | } |
17 | #box img{ |
18 | border : 1px solid #ccc ; |
19 | } |
20 | </style> |
21 | <!--[if IE]> |
22 | <style type= "text/css" >? |
23 | #box i { |
24 | display :inline- block ; |
25 | height : 100% ; |
26 | vertical-align : middle |
27 | } |
28 | #box img { |
29 | vertical-align : middle |
30 | } |
31 | </style> |
32 | <![endif]--> |
33 |
34 |
35 |
36 | </head> |
37 |
38 | <body> |
39 | <div id= "box" > |
40 | <i></i><img src= "images/demo_zl.png" alt= "" /> |
41 | </div> |
42 |
43 |
44 | </body> |
45 | </html> |
方法三
在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。
01 | <html xmlns= "http://www.w3.org/1999/xhtml" > |
02 | <head> |
03 | <meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> |
04 | <title>方法 3 - 未知高度的图片垂直居中 - www.nowamagic.net</title> |
05 |
06 | <style type= "text/css" > |
07 | body { |
08 | height : 100% ; |
09 | } |
10 | #box{ |
11 | width : 500px ; height : 400px ; |
12 | text-align : center ; |
13 | border : 1px solid #d3d3d3 ; background : #fff ; |
14 | } |
15 | #box p{ |
16 | width : 500px ; height : 400px ; |
17 | line-height : 400px ; /* 行高等于高度 */ |
18 | } |
19 |
20 | /* 兼容标准浏览器 */ |
21 | #box p:before{ |
22 | content : "." ; /* 具体的值与垂直居中无关,尽可能的节省字符 */ |
23 | margin-left : -5px ; font-size : 10px ; /* 修复居中的小BUG */ |
24 | visibility : hidden ; /*设置成隐藏元素*/ |
25 | } |
26 |
27 | #box p img{ |
28 | * margin-top :expression(( 400 - this.height )/ 2 ); /* CSS表达式用来兼容IE6/IE7 */ |
29 | vertical-align : middle ; |
30 | border : 1px solid #ccc ; |
31 | } |
32 | </style> |
33 |
34 | </head> |
35 |
36 | <body> |
37 | <div id= "box" > |
38 | <p><img src= "images/demo_zl.png" alt= "" /></p> |
39 | </div> |
40 |
41 | </body> |
42 | </html> |