cailangwei

九尺之台，起于累土。
温故而知新，可以为师矣！
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

div布局，让整个网页在各种分辨率和浏览器下都居中

Posted on 2011-12-11 17:19  cailangwei  阅读(1927)  评论(0)    收藏  举报 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>abc</title>
</head>
<body>
<div style="margin:auto;width:670px; "><!--margin:auto;width:670px;保证整张网页居中显示，必须有这两项-->

<div><img name="http_imgload209_r1_c1" src="images/http_imgload%20(9)_r1_c1.jpg" width="670" height="71" border="0" alt=""></div>

<div><!--对于处理一行之中有两个DIV的情况，要让第一个DIV具有style="float:left"属性，第二个没有-->
<div style="float:left"><img name="http_imgload209_r2_c1" src="images/http_imgload%20(9)_r2_c1.jpg" width="160" height="374" border="0" alt=""></div>
<div><img name="http_imgload209_r2_c2" src="images/http_imgload%20(9)_r2_c2.jpg" width="510" height="374" border="0" alt=""></div>
</div>

<div><img name="http_imgload209_r3_c1" src="images/http_imgload%20(9)_r3_c1.jpg" width="670" height="58" border="0" alt=""></div>

</div>
</body>

在firefox中用这样的css就可以使一个div居中显示： 
<style>  
div{       
　　　margin: 0 auto;  
}  
</style> 
但是在ie6里就不起作用了，后来发现需要在html文件头部加入下面这断代码就可以了 
Html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
分析原因可能是因为ie6默认不支持xhtml 1.0所以对于ie要显示的声明一下。