居中样式的变化

在固定宽度页面布局中最常见且主要的变化可能是固定宽度的内容块漂在浏览器窗口的中间，而不是粘附于浏览器窗口的左边。你可以很容易地实现这一效果，方法是在其余标记周围（也就是 body 标签内）添加一个包装器（wrapper）div，并创建一个 CSS 样式来居中那个 div。

例如，图 B 是在图 A 的基础上添加了一个标签（<div id="wrapper">）和一个相应的 CSS 样式后的结果。下面是新添加的 CSS 样式的代码：

以下是引用片段： div#wrapper {     position:relative;     margin-left:auto;     margin-right:auto;     top: 20px;     width:750px;     background-color: #CCCCCC; }

这种方法之所以能用，是因为所有的布局 div 都是相对于它们的父元素相对定位的。在图 A 中，标题、内容列和页脚所在 div 的父元素是 body 标签，但是在图 B 中，它们的父元素是 wrapper div。这种居中方法在“Creating a centered page layout with CSS（使用 CSS 创建居中页面布局）”一文中有详细的解释。

上一页  [1] [2] [3] [4] [5]