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

来源：互联网发布：火星潮牌淘宝编辑：程序博客网时间：2024/04/29 00:10

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

方法一

将外部容器的显示模式设置成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">
06body {
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">
07body {
08    height:100%;
09}
10#box{
11width:500px;height:400px;
12display:table-cell;
13text-align:center;
14vertical-align:middle;
15border:1px solid #d3d3d3;background:#fff;
16}
17#box img{
18border: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 source
print?
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">
07body {
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>
转载： http://www.nowamagic.net/librarys/veda/detail/1950

0 0