网页布局笔记1—让设计居中

让设计居中有两个基本方法: 一个方法使用自动空白边,另一个方法使用定位和负值的空白边。

1. 使用自动空白边让设计居中

  假设有一个典型的布局,希望让其中的容器 div 在屏幕上水平居中:

  <body>

    <div id=’wrapper’>content</div>

  <body>

  为此,只需定义容器 div 的宽度,然后将水平空白边设置为 auto:

  #wrapper { width: 720px; margin: 0 auto;}

 

2. 使用定位和负值空白边让设计居中

  与前面一样,首先定义容器的宽度。然后将容器的 position 属性设置为 relative,将 left 属性设置为 50%。这会把容器的左边缘定位在页面的中间。这会把容器向左边移动它的宽度的一半,从而让它在屏幕上居中:

  #wrapper {

    width:720px;

    position: relative;

    left:50%;

    margin-left: -360px;

  }

posted @ 2014-02-10 15:21  weishuwen  阅读(250)  评论(0编辑  收藏  举报