最近有一個讀者問到，怎樣用CSS建立一個置中的頁面配置。該讀者所追求的，是要達到這樣一種效果，就如同在一個1024象素寬的頁面上設計出一個800象素寬的表格。這是一種使用很廣泛的頁面設計方法，按照傳統，它要靠巢狀表格格才能達到這一效果，因此，這位讀者追尋一種用CSS來達到這一效果的方法並不讓人驚訝。
用CSS來建立一個置中的頁面設計的基本技術相對來說較簡單，不過與同類相比，也簡單不了太多。讓我們看一下，要將這種由來已久的基於表格的設計轉變成用CSS，該怎樣做。
傳統的做法：置中的布局
首先，由於是做比較，讓我們來看一個例子，它是一種基於一個置中表格的頁面設計。圖表A中顯示了一個例子，以下是這個例子的編碼：
<body>
<p> </p>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="10"bgcolor="#FFFFFF">
<tr>
<td colspan="2"><h2 align="center">Header</h2></td>
</tr>
<tr>
<td width="150px" valign="top"><h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</td>
<td valign="top"><p>Main Content -- Love's not
time's fool...</p></td>
</tr>
<tr>
<td colspan="2"><hr />
<p>Footer text -- Admit impediments...</p>
</td>
</tr>
</table>
<p> </p>
</body>
< table >這個標籤包括了以下一些屬性，將其寬度定義為頁面寬度的80%，並將該表格置於頁面的中間。在表格的前面有一個空白段落，這就使得頁面的頂端與表格的頂端之間有一些垂直空間。在表格的後面也有一個空白段落，這就使得頁面的底端與表格的底端之間也有一些空間。這個表格包括兩列三行。頂端的單元被合并了，用來放置頁首，底端的行也合并了，以安置頁尾，而中間那些單元則被分為兩列，一個供放置主要內容，另一個則是導航工具列。
這是一個簡單的例子，詮釋的是一種多年以來廣為人們使用的技術。在現今的那些應用軟體中，有代表性的主要種包含了巢狀表格格，用以建立一種複雜得多的版面設計，不過，它的複雜性雖然被人為加大了，它所採用的基本技術卻並沒有改變。
將置中的設計轉換成使用CSS
要想將這種傳統的基於表格的版面設計轉換成用CSS，你只要用divs來代替那些表格和表格單元就行了。一個div取代表格本身，另一個取代那些單個的表格單元，這些單個的表格單元定義了主要的版面設計項目，諸如標題，頁尾，導航工欄，以及主要內容。每個div都有一個id,且它們的id都是獨一無二的，你可以用一個CSS選取器來讓它們建立各自不同的樣式，每一種樣式對應於div中的一種，這種對應關係依據id而建立。那個取代表格的div被標上了id=外部，其它那些div則靠他們各自的功能來鑒別。
這是已校訂過的用div代替表格的XHTML的編碼：
<body>
<div id="outer">
<div id="header">
<h2>Header</h2>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
注意一下所有那些陳述的格式，原來它們被包括在<table>和<td>標籤中，現在已經被移走了。而那些位於表格前面和後面的空白段落也都不見了。CSS格式會處理所有的格式化以及空間的問題。
以下是CSS的編碼，就是這些編碼，將頁面設計成一種置中的樣式，這種設計與前面所說的基於表格的設計很類似：
body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
圖表B顯示了結果，即用CSS執行的一個置中頁面的版面設計。
解析CSS編碼
與基於表格的版面設計比起來，它的主體樣式並沒有什麼變化。它只不過設定了一下背景顏色，預設本文字型以及尺寸大小。
div#outer是其中的一種樣式，它是這一技術的關鍵。這就是前面提到過的以div取代表格的樣式，它建立了置中的盒子，而這個盒子成了包容該頁面所有內容的容器。將寬度設定為80%的規則設定了該div的寬度，就跟表格標籤的相應屬性規定該表格的寬度一樣。與此相類似，background-color:#FFFFFF為div建立了一個白色的背景，就如同表格中bgcolor="#FFFFFF"屬性為表格設定白色背景一樣。margin-top: 50px and margin-bottom: 50px則用頂端和底端的空白來取代表格中用來造成垂直空間的空白段落。
這一技術的關鍵在於，外部div的中心要安排合適。這裡存在一個難題，可以說是我們面臨的一個挑戰，即div沒有像align="center"這樣一個屬性，這與表格不同，表格中有這樣一種屬性。你可以在div的母元素（在本案例，指< body >標籤）中使用text-align: center來將外部div置於中心位置。儘管除了本文以外，大多數瀏覽器還會為一些諸如div的塊元素使用該隊列，但是我們有證據可以證明它是對排列本文這一屬性的誤用，而且它會使問題複雜化，就如同你建立一些額外的樣式來使那些已按正常標準對齊的文字重新回到左邊一樣。
用CSS來將塊元素置於中心位置的正確方法是這樣設定：margin-left: auto，margin-right: auto。這就指示瀏覽器自動計算頁面兩邊合適的空白寬度，從而將div置於中心。border: thin solid #000000這一規則在外部div的周圍添加了一個邊界，這是因為用CSS添加很容易，而如果用表格的話就很難了。CSS編碼中的其它部份則規定了div的頁首，頁尾，nav，以及主要內容。
div#header和div#footer則設定了那些div的頁邊空白以及填料。此外，div#header包含了text-align: center這一規則，它可以將頁首文本置於中心位置，div#footer則包含了border-top: thin solid #000000這一規則，它可以建立一個圍繞該div的頂端邊緣的邊界，而在基於表格的版面設計中，與它相對應的則是位於頁尾上方的一些水平線。
在這個置中的盒子的中央，div#nav和div#main建立了兩個縱列。在div#nav樣式中，float: left這一規則將div推到它的母元素（外部div）的左邊，而width: 25%這一規則將該div的寬度設定為它的母元素的25%。由於該nav div被移到了左端，其寬度也被限定了，這就為主要的div留下了活動空間，讓它可以移到該nav div的右邊，這樣就取得了兩個縱列的效果。div#main樣式包含了左邊頁面空白30%的規則，以讓主要文本排列在一個整齊的縱欄中，而不是分散開來，甚至散到該nav縱欄外面。主要的div左邊的空白頁面比nav div中左邊空白頁面的寬度稍稍大一點。在我的“用CSS漂浮來建立一個三欄頁面版面設計”一文中，我詳細介紹了一種技術，這一技術是用CSS漂浮來建立頁面設計中的多個縱列的。
本文作者： Michael Meadhra，自Web問世之初便涉足IT行業，目前已出版了30多本書，其中包括How to Do Everything with Dreamweaver MX（Osborne/McGraw-Hill出版）。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
