div+css页面居中显示

2008/6/4 12:29  

HTML页面居中显示,是指将小于屏幕宽度的HTML页面显示在左右居中的位置。

这种需求很常见,用css和div实现也很简单,只需2步,5-6行代码:

1. 在HTML文件中,定义1个div(id为jijian91_outer),把网页全部显示内容包裹起来

2. 在css文件中,定义该div的css属性
div#jijian91_outer {
width: 70%;
margin-left: auto;
margin-right: auto;
}

其中, margin-left和margin-right是网页居中的关键。width是为了演示,可根据实际需要修改。

示例代码如下:

html文件
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link href=”css.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”jijian91_outer”>
css+div实现HTML页面居中显示。简单的技巧,简单的实现,符合W3C标准的代码,兼容IE和Firefox。
<br /><br /> by <a href=”http://jijian91.com”>互联网视点@jijian91</a>
</div>
</body>
</html>

css文件
div#jijian91_outer {
width: 70%;
margin-left: auto;
margin-right: auto;
}

以上HTML页面居中显示方法,在IE和Firefox下均能正确显示。

转载请注明来自:jijian91与小z - 编程

永久链接:http://jijian91.com/blog20080604/div-css-center.html