CSS手册CSS3手册Edu网闻
欢迎来到thinkcss查找CSS资料与学习DIV CSS布局技术!
您的位置:ThinkCSS首页 > CSS技巧 >

DIV CSS布局设置网页整体水平居中的代码

以前用表格布局时设置HTML网页居中非常方便,把表格对齐方式设置为居中 align="center"就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已。

原来表格网页布局居中对table设置 align="center"即可实现:

  1. <table align="center"> 

DIV CSS布局居中代码:

  1. body{text-align:center}
  2. #main{ width:400px; margin:0 auto} 

布局居中DIV代码:

  1. <div id="main">我在布局居中DIV内</div> 

请看这段代码关键代码margin:0 auto; 这句代码就是让居中,缺一不可,意思是外边距上下设置为0,左右设为自动,这样它就居中了,text-align:center是DIV内内容居中。

那么可能你要问了,为什么对body设置text-align:center内容居中属性呢?为什么还要让内容居中呢?这句是为了适应IE6以下版本的浏览器而加的,IE6以下对margin:0 auto;不能解析为居中,所以用这种方式来补救。如果要让HTML网页整体水平居中,同时布局内内容靠左,这个时候再对对象CSS使用 text-align:left;就可实现网页整体布局居中内容靠左。

注:marginpadding的值的顺序为顺时针上右下左,如margin:1px 2px 3px 4px;还可以缩写为上下、左右,如本例,如果为margin:0px;则是各边都为0

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>居中技巧代码</title> 
  6. <style> 
  7. body{text-align:center} 
  8. #main{ width:400px; margin:0 auto; text-align:left; border:1px solid #333;
     background:#e1edfb; height:200px;} 
  9. </style> 
  10. </head> 
  11.  
  12. <body><div id="main">我在布局居中DIV内</div> 
  13. </body> 
  14. </html> 

DIV网页整体布局居中实例浏览器中效果截图


DIV CSS网页整体布局水平居中截图

以上使用margin:0 auto; 实现布局水平居中关键代码,body设置text-align:center为了兼容各大浏览器中网页布局居中margin:0 auto配合生效。

扩展了解:margin:0 auto div无法居中

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/j877.shtml

上一篇:div并排不换行显示 DIV并排显示
下一篇:没有了

CSS基础教程 CSS Based Tutorial

HTML基础教程 HTML Based Tutorial

CSS教程文章修订日期:2016-05-25 09:04 www.thinkcss.com div css。