利用CSS使網頁居中對齊
阿新 • • 發佈：2019-01-14
如何使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則設定了
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則設定了