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

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

方法一

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

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值