您的位置：首页 > Web前端 > CSS

CSS让图片垂直居中的几种技巧

2016-07-14 01:38 716 查看
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。

方法一

将外部容器的显示模式设置成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表达式来实现兼容。

view sourceprint?

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 水平垂直居中
相关文章推荐
新的分享
章节导航