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