无意中在网站看到一属性可以让一个DIV实现居中,个人觉得很好,想起以前自己学习CSS时候也曾经接触过实现DIV居中的方法,看过css彻底研究一本书,中讲到用三个DIV的方式,实现代码长,代码不易理解,现在想想,时代的变化真快!下面就分享一下,用vertical-align:middle可以很简单地解决。
就以一个404页面为例,看如何让一张图片相对于整个页面居中,如下图:
这是一个404页面,里面就只有一张图片,点击图片可以回到首页,而且这个图片是相对于整个页面居中的,无论是水平还是垂直。
接下来看一下它的html代码:
1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3
4
5
404页面title>
6head>
7
8
9a>
10div>
11body>
12html>
代码很简单,就一个class="wall"的div标签,一个a标签,一个class=“img404”的img标签。
接下来就是写css了,先让class="wall"的div的宽和高都为100%,以填充整个页面,CSS如下:
1
2body{margin:0;background:#333;_height:100%;}
3.wall{width:100%;height:100%;position:absolute;left:0;top:0;text-align:center;}
4.img404{border:0;width:700px;}
5style>
以上CSS里面值得一说的恐怕就是为什么要用绝对定位(position:absolute)以及_height:100%这个样式了;我试了很多方法,结果我只能用绝对定位才能让它的height:100%生效,当然固定定位(position:fixed)也是可以的,可是IE6不支持;_height:100%是为了兼容IE6,让class="wall"的div在IE6里也能高度为100%。如果想验证一下class="wall"的div现在是否已经填充了整个页面,不妨在.wall里面设一个背景色就可以知道了,这里我就不做实验了。
目前整页的代码如下:
1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3
4
5
404页面title>
6
7body{margin:0;background:#333;_height:100%;}
8.wall{width:100%;height:100%;position:absolute;left:0;top:0;text-align:center;}
9.img404{border:0;width:700px;}
10style>
11head>
12
13
14a>
15div>
16body>
17html>
效果如下:
接下来就利用vertical-align:middle来实现垂直居中了,因为class="wall"的div填充了整个页面,所以只要让图片在class="wall"的div里面垂直居中就达到目的了。以前总是以为vertical-align与text-align是同样的道理,一个是垂直居中,一个是水平居中,只要给class="wall"的div加上一个vertical-align:middle就能让图片垂直居中,结果一点效果也没有。事实上vertical-align与text-align完全不一样,给class="wall"的div加上一个text-align:center的话,毫无疑问是可以让里面的img水平居中,但vertical-align却不能这样子用。
先看一下W3C上对vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
必须承认这句话我看了很久才看懂说的是神马意思,我的理解是它有两种用法:
第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。
第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的,可以打个比喻:假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:
如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:
说到这里,思路就清晰了(PS:理应知道vertical-align可以设middle,top,bottom等等,甚至可以设置具体的值或百分比,如果想知道会有怎样的效果,可以自己实验一下,这里就不多说了。)。
接下来回到这篇文章的主题,现在我要让class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面加一个span空标签,把它的高度设为100%,再给它一个vertical-align:middle样式,同样地给img一个vertical-align:middle样式,那么img就可以在div里面垂直居中了。如图:
按照这个思路,完整的页面代码就出来了:
1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3
4
5
404页面title>
6
7body{margin:0;background:#333;_height:100%;}
8.wall{width:100%;height:100%;position:absolute;left:0;top:0;text-align:center;font-size:0;}
9.img404{border:0;width:700px;vertical-align:middle;}
10.verticalAlign{vertical-align:middle;display:inline-block;height:100%;width:1px;margin-left:-1px;}
11style>
12head>
13
14
15span>
16a>
17div>
18body>
19html>
以上的CSS里面值得一提的是.verticalAlign,加一个display:inline-block是为了触发它的layout,以让本来没有layout的span可以设置宽和高,margin-left:-1px是为了让span左移一个像素,而令img在水平方向上回到正中位置;另外.wall里面的font-size:0正如我上一篇文章所说的是为了消除代码换行所造成的空隙。
最终效果如下: