码迷,mamicode.com
首页 > 其他好文 > 详细

自动居中一列布局

时间:2014-06-21 06:43:20      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   color   strong   

三个技能点:

  标准文档流

  块级元素

  margin 属性

一般我们的网页元素会设为头 内容 底部三部分,然后要将三个内容同时居中,我们一般是要在三个标签外层继续加一个wrap包裹标签:

<div id="wrap">
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

需要设置wrap的margin属性

#wrap{
   margin:0 auto;
   .......  
}

外边距 = (浏览器的宽度-外包层的宽度) / 2

注意:

  若是wrap层设置浮动或是绝对定位,是这种自动居中方式是无用的。

 

 

自动居中一列布局,布布扣,bubuko.com

自动居中一列布局

标签:style   class   blog   code   color   strong   

原文地址:http://www.cnblogs.com/goupb/p/3795469.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!