利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。

就以一个404页面为例,看如何让一张图片相对于整个页面居中,如下图:

这是一个404页面,里面就只有一张图片,点击图片可以回到首页,而且这个图片是相对于整个页面居中的,无论是水平还是垂直(PS:这可算是我做404页面最为习惯的一种懒人做法了,越简单越好,要想好看的话,直接用photoshop做一张好看一点的图片就好了~)。

接下来看一下它的html代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title>404页面</title>
 6 </head>
 7 <body>
 8     <div class="wall">
 9         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a>
10     </div>
11 </body>
12 </html>

代码很简单,就一个class="wall"的div标签,一个a标签,一个class=“img404”的img标签。

接下来就是写css了,先让class="wall"的div的宽和高都为100%,以填充整个页面,CSS如下:

1 <style type="text/css">
2         body{ 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;}
5 </style>

以上CSS里面值得一说的恐怕就是为什么要用绝对定位(position:absolute)以及_height:100%这个样式了;我试了很多方法,结果我只能用绝对定位才能让它的height:100%生效,当然固定定位(position:fixed)也是可以的,可是IE6不支持;_height:100%是为了兼容IE6,让class="wall"的div在IE6里也能高度为100%。如果想验证一下class="wall"的div现在是否已经填充了整个页面,不妨在.wall里面设一个背景色就可以知道了,这里我就不做实验了。

目前整页的代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title>404页面</title>
 6     <style type="text/css">
 7         body{ 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;}
10 </style>
11 </head>
12 <body>
13     <div class="wall">
14         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a>
15     </div>
16 </body>
17 </html>

效果如下:

接下来就利用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里面垂直居中了。如图:

按照这个思路,完整的页面代码就出来了:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  
 3  <html xmlns="http://www.w3.org/1999/xhtml">
 4  <head>
 5      <title>404页面</title>
 6      <style type="text/css">
 7          body{ 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;}
11  </style>
12  </head>
13  <body>
14      <div class="wall">
15         <span class="verticalAlign"></span>
16         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a>
17      </div>
18  </body>
19  </html>

以上的CSS里面值得一提的是.verticalAlign,加一个display:inline-block是为了触发它的layout,以让本来没有layout的span可以设置宽和高,margin-left:-1px是为了让span左移一个像素,而令img在水平方向上回到正中位置;另外.wall里面的font-size:0正如我上一篇文章所说的是为了消除代码换行所造成的空隙。

最终效果如下:

(PS:以上仅是个人理解,如有不同意见,或以上说法有错漏,欢迎指出。)

同样的原理可以实现文字居中,完整代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title>无标题页</title>
 6     <style type="text/css">
 7         .wrap{ width:1000px; height:100px; border:solid 1px #999; margin:0 auto; text-align:center;}
 8         .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}
 9         .textSpan{vertical-align:middle;}
10 </style>
11 </head>
12 <body>
13     <div class="wrap">
14         <span class="verticalAlign"></span>
15         <span class="textSpan">文字居中</span>
16     </div>
17 </body>
18 </html>

效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

Flexbox 布局的最简单表单

弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。

992
来自专栏Ryan Miao

博客园主题修改中用到的css属性

样式覆盖 id选择器大于class选择器。 对于原主题中想要覆盖的id选择器,使用!import覆盖。 对于原主题中想要取消的css属性,使用inherit. ...

3247
来自专栏前端知识分享

第4天:JS入门-给div设置宽高背景色

今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高、背景色。一点点都是进步。核心代码如下:

951
来自专栏cnblogs

双飞翼布局的改造 box-sizing和margin负值的应用

box-sizing + margin负值 升级双飞翼布局 一、box-sizing属性 ? .content-size, .border-size{ ...

2448
来自专栏HTML5学堂

前端特效制作 | CSS3圆形风格面包屑导航

HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

6156
来自专栏Android先生

android自定义view(自定义数字键盘)

至此,我们写的差不多了,然后就是要提供一个接口,对外开放,方便用的时候调用,获取到数字或者其他信息:

1692
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(一)

在我们的开发生活中,相信很多人都会遇到形形色色的项目需求,比如更改浏览器的默认样式,在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式,或者当你...

3675
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

1193
来自专栏每日一篇技术文章

weex-07-通用布局

weex 常用的两种布局 分别为 flex弹性布局 和 绝对定位布局 一般情况下都是这两种配合使用!

2111
来自专栏前端知识分享

第181天:HTML5——视频、音频

1091

扫码关注云+社区

领取腾讯云代金券