`
dcj3sjt126com
  • 浏览: 1871111 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

web 
阅读更多

转自:http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html

如果想让一个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>
复制代码

效果如下:

 
 
 
分享到:
评论

相关推荐

    利用vertical-align:middle实现行内元素的水平垂直居中对齐

    但是,利用`vertical-align:middle`属性也能达到类似的效果,并且在某些情况下可以提供更加简洁的解决方案。 首先,我们来理解`vertical-align`属性。根据W3C标准,`vertical-align`属性用于设置行内元素(inline)...

    IE6下 vertical-align:middle 和 height 引发的边框消失

    vertical-align:middle; height:50px;}&lt;/style&gt; html结构:测试 (注意:测试后面没有其他文字或元素)现象:div的下边框消失,在ff下没事,且文字不能居中(如图)。 html结构2测试测试文字 –在后面再加上...

    text-align,vertical-align,line-height居中布局笔记

    如果想要让多个`&lt;div&gt;`元素在同一行中居中对齐,可以将它们的`display`设置为`inline-block`,并设置`vertical-align`为`middle`。需要注意的是,当使用`vertical-align: middle`时,通常还需要配合`line-height`...

    完美居中1

    `display: table-cell`将元素转换为类似于表格单元格的行为,使得`vertical-align: middle`可以生效,从而实现内容的垂直居中。对于IE6和7,使用`*display: inline-block`是为了兼容这些老版本的浏览器。 `vertical...

    谷歌浏览器 div 水平对齐

    这样,我们可以用 `vertical-align: middle` 实现垂直居中,再配合 `text-align: center` 实现文字的水平居中。具体代码如下: ```html Multi-line, vertical-align:middle; text-align:center; Multi-...

    CSS实例:vertical-align属性让网页层居中

    在标题“CSS实例:vertical-align属性让网页层居中”中,我们聚焦于如何利用`vertical-align`属性来实现网页内容的垂直居中。 首先,了解`vertical-align`的基本用法。这个属性主要应用于`display: inline`、`...

    css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明

    在示例代码中,开发者遇到了在`&lt;li&gt;`元素中使用`vertical-align: middle`的问题。`&lt;li&gt;`是块级元素,而`vertical-align`只对行内元素和表格单元格生效。因此,`vertical-align: middle`并未按预期工作。解决这个问题...

    vertical-center:垂直水平居中元素

    最后,如果我们处理的是表格单元(table cell),可以使用`vertical-align: middle`属性来实现垂直居中: ```css .table-cell { vertical-align: middle; } ``` 总结来说,实现HTML元素的垂直居中有多种方法,...

    CSS最常用的样式代码

    - `vertical-align: middle;`: 居中对齐。 - `vertical-align: bottom;`: 底部对齐。 **5. 显示模式 (`display`):** - `display: block;`: 块级元素。 - `display: inline;`: 内联元素。 - `display: list-...

    css(样式表属性)

    - `vertical-align: middle;` 设置元素垂直居中。 - `vertical-align: text-top;` 设置元素顶部与文本顶部对齐。 - `vertical-align: text-bottom;` 设置元素底部与文本底部对齐。 - **文本装饰(Text Decoration...

    CSS设置图片的对齐方式案例.pdf

    纵向对齐方式:middle&lt;img src=02.jpg style="vertical-align:middle"&gt; 纵向对齐方式:sub&lt;img src=02.jpg style="vertical-align:sub"&gt; 纵向对齐方式:super&lt;img src=02.jpg style="vertical-align:super"&gt; 纵向对齐...

    垂直居中显示ie7+

    在网页设计中,"垂直居中显示"是一个常见的需求,特别是在多设备、多屏幕尺寸的环境下,确保元素在页面上无论何时都能保持居中状态,能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...

    CSS常用属性一览表

    - `vertical-align: middle;`:居中对齐。 - `vertical-align: text-top;`:顶部对齐到文本的基线。 - `vertical-align: text-bottom;`:底部对齐到文本的基线。 #### 四、CSS边距属性 - **`padding`**:定义...

    在网页中居中的若干种方法(至少6种,已经标明了对应浏览器,希望对你有用哦~)

    ` 水平居中,而 `vertical-align: middle;` 可以垂直居中,但此方法不适用于块级元素。 5. **Margin Auto 居中** 对于块级元素,如 `div`,可以使用 `margin: 0 auto;` 来实现水平居中,但这种方法不支持垂直居中...

    CSS设置文字图片垂直居中的方法总结

    然后,`vertical-align:middle`属性用于控制行内元素的垂直对齐方式,当元素的`display`设置为`inline-block`时,此属性可以将元素在垂直方向上居中对齐。 具体实现步骤如下: 1. 在需要垂直居中的元素后面添加一...

    浅谈css元素居中

    水平居中 若为行内元素,对其父...另由可通过对表格元素td使用vertical-align:middle可对其内的元素进行垂直居中可知,通过对父元素使用display:table-cell;vertical-align:middle;也可实现对元素的垂直居中,且该种方

Global site tag (gtag.js) - Google Analytics