利用CSS使網頁置中對齊
如何使DIV置中
主要的樣式定義如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明：
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容置中；對於IE這樣設定就已經可以了。但在mozilla中不能置中。解決辦法就是在子項目定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要說明的是，如果你想用這個方法使整個頁面要置中，建議不要套在一個DIV裡，你可以依次拆出多個div，只要在每個拆出的div裡定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
如何使圖片在DIV 中垂直置中
用背景的方法。舉例：
body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}
關鍵就是最後的center,這個參數定義圖片的位置。還可以寫成“top left”(左上方)或者"bottom right"等，也可以直接寫數值"50 30"
效果如下：
如何使文本在DIV中垂直置中
如果是文字，便不能用背景方法，可以用增高行距的辦法變通實現垂直置中，完整代碼如下：
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>
說明：
vertical-align:middle;表示行內垂直置中，我們將行距增加到和整個DIV一樣高line-height:200px;然後插入文字，就垂直置中了。
------------------------------------------------------------------
傳統的做法：置中的布局
首先，由於是做比較，讓我們來看一個例子，它是一種基於一個置中表格的頁面設計。圖表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;
}
解析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中左邊空白頁面的寬度稍稍大一點。
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
