导航

毅博客

分享本身就是件快乐的事,我因别人得到帮助而感到幸福

« 数据层与样式层分离模式的管理用CSS制作“鼠标经过图像 »

网页如何水平居中?

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
请大家帮忙:行文措辞难免有错,请大家在阅读时发现错误通过评论方式告诉我。谢谢大家

在经典论坛里看到一些网友对于非表格布局的网页居中还是不知怎么做,做了也不是很理解。这里我想讲一下如何进行网页的居中。

我写网页是包在一个叫 #container 的DIV中的,所以这里主要讲一下BODY与#container之间的关系。

先看一下body的CSS样式:

body{ margin:0;padding:0;text-align:center;}

这里的body把margin与padding设置为0,这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中,这样就包括了#container也一起居中了。

再来看一下#container的样式:

#container{width:760px;margin:0 auto;text-align:left;}

学问就在这个#container里了: 给这个容器设定了宽度,这里是760px,margin:0 auto; 这里的margin中的第一个0是上下、第二个auto是左右。上下为0左右让其自控。

作者 / 振之
网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295
  • quote 1.emily
  • 长见识了,如果我要在1024X768和800X600这两个分辨率下标准页面内容都要满屏显示的话该如何做?宽度是不是定100%就行了?
    #container{width:100%;margin:0 auto;text-align:left;position:relative;}
  • 2006-11-6 14:28:37 回复该留言
  • quote 3.emily
  • 是的,谢谢.前年曾和你讨论标准,时隔两年的现在你上去,而我还在门外.有点惭愧.
  • 2006-11-7 9:35:10 回复该留言
  • quote 4.振之
  • http://www.jonmax.com/
  • 这两年得益于我离开了公司,自己有更多的空闲时间去研究这些。很多朋友学标准之难,也就难于没有时间专心研究!
  • 2006-11-7 13:01:44 回复该留言
  • quote 5.jinqiu
  • http://firefoxmozilla.free.fr
  • 您好。我是一个网站制作的初学者,现在遇到了很棘手的问题,希望您能帮忙解答,谢谢!
    我这个问题可能比较奇怪。我使用一个layer来布局,layer的宽度是100%,其中的内容是一个div或者是表格,固定宽度为900px;我希望实现的效果是这个表格能在layer中居中对齐,这样子的话无论浏览器分辨率是多少,内容都是自动居中的。
    我是通过layer中的text align设为center做的,在ie中正常,但是一到firefox中就不行了,表格或者div就跑到左边去了。
    --------------
    又及:现在网络不是很好,如果方便的话,希望能和您取得邮件联系,谢谢!!

  • 2007-1-27 19:08:38 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog .Theme from Google黑板报 By Washun

Copyright 2005-2007 Andymao.com. All Rights Reserved.

Search

最新评论及回复

最近发表