web开发一--------让页面居中

最新推荐文章于 2022-10-11 22:57:06 发布

张小凡vip

最新推荐文章于 2022-10-11 22:57:06 发布

阅读量8.9k

点赞数 3

分类专栏： web web模块积累文章标签： web开发 css 布局 html 居中

本文链接：https://blog.csdn.net/zzq900503/article/details/42193267

版权

web 同时被 2 个专栏收录

142 篇文章 2 订阅

订阅专栏

web模块积累

47 篇文章 1 订阅

订阅专栏

web开发第一步就是做好布局

首先当然是要让页面居中

修改协议为

<!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" >

新建一个div 作为页面的容器

 <body>
 <div id="center">   
把页面内容放在center  div中可以居中显示
<hr>
</table>
</div>
  </body>

让div的style为如下可让页面居中:

 <style  type="text/css">
body{text-align:center}
#center {
    max-width:1140px;
    min-width:960px;
    margin:0pt auto; 
}
#center {
  width:910px;
  min-width:800px;
}


</style>

完整代码:

<!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>    
    <title>web</title>
  <style  type="text/css">
body{text-align:center}
#center {
    max-width:1140px;
    min-width:960px;
    margin:0pt auto; 
}
#center {
  width:910px;
  min-width:800px;
}


</style> 


</head>
  
  <body>
 <div id="center">   
把页面内容放在center  div中可以居中显示
<hr>
</table>
</div>
  </body>
</html>

IE6,IE7,IE8中均可使用

效果图: