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 - 编程

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