9.3　网页居中

9.3　网页居中

在浏览网页时，基本不会遇到和浏览器窗口同样宽的页面，当今宽屏显示器越来越普及，浏览器的窗口也变得非常宽，如果网页与浏览器同宽，这将使内容的阅读变得极其难受，如图9-9所示。

图9-9　与浏览器同宽的页面

通常看到的网页，会把页面内容宽度控制在一个适当的范围内（一般不超过1 000 px），并将整个页面内容水平居中放置，内容区域之外的两侧则显示为网页背景颜色或背景图片，如图9-10、图9-11所示。

图9-10　宽度适当并居中的网页（1）

要制作这样的页面，首先有一个id为wrapper（意思是包装袋，也可以命名为其他名字）的div，将页面中所有的元素都写在该div中。本节以一个纯文本页面为例，在wrapper中添加5个段落（内容部分省略）。代码如下：

图9-11　宽度适当并居中的网页（2）

首先限制wrapper的宽度，width属性设置wrapper的宽度为600像素，margin属性设置wrapper上、下外边距为0，左、右外边距自动，即水平居中，如图9-12所示，代码如下：

白色的背景看上去比较单调，接下来为页面添加背景，网页的背景设置在body元素上，将背景颜色设置为＃4d4d4d，背景图片“page-background.jpg”水平平铺，如图9-13所示，代码如下：

图9-12　wrapper固定宽度并居中

图9-13　设置页面背景

为wrapper添加背景以及内边距。设置内边距上方20 px，右方20 px，下方50 px，左方20 px，背景颜色为白色，在wrapper底部添加背景图片“wrapper-background.jpg”，设为水平平铺，如图9-14所示，代码如下：

图9-14　设置wrapper背景及内边距