网页布局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;

  }

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。