CSS在页面布局中实现div水平居中的方法总结
作者:dudo 来源:dudo博客 发布时间:2008-06-03 12:09:00
标签:布局,css,居中
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:
一、margin:auto 0 与 text-aligh:center
在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。意即:
#wrap { margin:0 auto;}
上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。请在现代浏览器
(如Internet Explorer 7、Firefox、Opera等)中运行现在的代码:
上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的,不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的,即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center,这样页面内所有的元素都会自动居中,同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码:
body {text-align:center;}
#wrap {text-align:left;}
这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果,我们就可以这样写我们的代码:
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
演示地址:div-center.htm (1.07 KB)
不过这里有一个前提,就是设置居中的元素要有固定的宽度,比如这里我们设定了为760像素。
0
投稿
猜你喜欢
- 先使用 Ms Access 压缩修复,然后再去相关的表把备注类型的字段里的“索引”去掉 备注型字段为什么不能超过1950字节?是由于备注型字
- 有些时候我们需要得到刚刚插入数据库中的条目id,用于相关系统的更改,在以前我是使用select+top 1+desc 这种笨方法实现的,在没
- 昨天有位同事说,他的网页查询过程中发现普通索引和唯一索引的效率是有差别的,普通索引比唯一索引快,今天在我的虚拟机中布置了环境,测试抓图如下:
- 刚看到吴磊同学的一些关于购物车的想法,正巧本人丁学对电子商务这方面比较熟悉,跳出来献丑了,希望对一些同行有些用处。本来想回复到下面的,结果发
- 一、输出指令ASP的输出指令<% =expression %>显示表达式的值。这个输出指令等同于使用Resp
- (1)、back_log:要求 MySQL 能有的连接数量。当主要MySQL线程在一个很短时间内得到非常多的连接请求,这就起作用,然后主线程
- 1 create table test(coltest varchar(20))2 实现这一功能 的 sql 语句 s
- 不得不承认,傲游在用户体验方面是做得比较好的,所以它的用户群非常大。也正因为如此,它的某些不好的特性也造成了开发人员不可忽略的浏览器兼容问题
- 因为自己在设计的时候就对这些东西经常不是很在意,以为是很小的事情,结果往往给自己搞出不少的麻烦。可能大家没有我这么粗心,不过还是想提醒一下跟
- Cookie是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个Web站点会话之间持久地保持数据。Request和Res
- 此文章主要介绍的是MySQL数据库的字符(串)的实际操作步骤,我们大家都知道MySQL数据库的字符(串)在实际操作是经常被用到了,所以你对其
- 看到sam关于max-height的文章,觉得按捺不住了。sam注重于样式表的写法,过多的要求div+css的布局,sam可是追求艺术的人哦
- 隐藏并修改文件的最后修改时间的asp-webshell。源码:<% '隐藏并修改文件的最后修改时间的aspshell '
- 此站:http://www.cbmland.com/ 的页面离开时的效果非常NB!佩服的很。一开始,我以为是用事件 onunload,试了一
- 阅读:Dreamweaver量身打造Wordpress留言板(一)虽然说在Dreamweaver量身打造Wordpress留言板(二)这一篇
- 你喜欢在博客文章中使用图片吗?是的,如果不是很麻烦的话,相信大家都不会介意放上几张漂亮的图片来点缀一下内容的,不过你的图片可能会导致下面的两
- 问题:希望仅仅允许某个指定IP的计算机连接到SQL Server服务器,但不允许其他的客户端进行连接。解决方法如下:你可以直接在防火墙中做限
- 服务器现在同时输出json和xml两种数据,取决于服务程序和页面之间的约定。在程序遇到问题的时候会返回错误信息,也按照相同的约定会返回jso
- 最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是inse
- 调度和锁定在很多客户一起查询数据表时,如果使客户能最快地查询到数据就是调度和锁定做的工作了。在MySQL中,我们把select操作叫做读,把