首页 > Web开发 > 详细

网页布局1—让设计居中

时间:2014-02-10 17:09:27      阅读:405      评论:0      收藏:0      [点我收藏+]

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

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;

  }

网页布局1—让设计居中

原文:http://www.cnblogs.com/weishuwen/p/weishuwen.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!