利用CSS使網(wǎng)居中對齊_第1頁
利用CSS使網(wǎng)居中對齊_第2頁
利用CSS使網(wǎng)居中對齊_第3頁
利用CSS使網(wǎng)居中對齊_第4頁
利用CSS使網(wǎng)居中對齊_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、利用 CSS 使網(wǎng)頁居中對齊利用 CSS 使網(wǎng)頁居中對齊如何使 DIV 居中 主要的樣式定義如下： body TEXT-ALIGN: center; #center MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 說明：首先在父級元素定義 TEXT-ALIGN: center; 這個的意思就是 在父級元素內(nèi)的內(nèi)容居中；對于 IE 這樣設(shè)定就已經(jīng)可以了。 但在 mozilla 中不能居中。解決辦法就是在子元素定義時候 設(shè)定時再加上 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 需要說明的是，如果你想用這個方法使整個頁面要居中，建 議不要

2、套在一個 DIV 里，你可以依次拆出多個 div ，只要在 每個拆出的 div 里定義 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。如何使圖片在 DIV 中垂直居中 用背景的方法。舉例： bodyBACKGROUND:url(/style/001/logo_w3cn_194x79.gif)#FFF no-repeat center;關(guān)鍵就是最后的 center, 這個參數(shù)定義圖片的位置。 還可以寫 成top left（ 左上角）或者bottom right等，也 可以直接寫數(shù)值 50 30效果如下： 如何使文本在 D

3、IV 中垂直居中 如果是文字，便不能用背景方法，可以用增高行距的辦法變 通實(shí)現(xiàn)垂直居中，完整代碼如下：<html><head><style>bodyTEXT-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>&

4、lt;p>test content</p></div></body></html>說明：vertical-align:middle; 表示行內(nèi)垂直居中， 我們將行距增加到 和整個 DIV 一樣高 line-height:200px; 然后插入文字， 就垂直 居中了。傳統(tǒng)的做法：居中的布局 首先，由于是做比較，讓我們來看一個例子，它是一種基于 一個居中表格的頁面設(shè)計。圖表 A 中顯示了一個例子，以下 是這個例子的編碼：<body><p>&nbsp;</p><table width=80% bo

5、rder=0 align=center cellpadding=0cellspacing=10bgcolor=#FFFFFF><tr><td colspan=2><h2align=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&g

6、t; <li>Admit impediments; love is not love</li> <li>Which alters when it alteration finds</li> </ul></td><td valign=top><p>Main Content - Loves not times fool.</p></td></tr><tr><td colspan=2><hr /><p>Footer tex

7、t - Admit impediments.</p> </td></tr></table><p>&nbsp;</p></body>< table > 這個標(biāo)簽包括了以下一些屬性，將其寬度定義 為頁面寬度的 80% ，并將該表格置于頁面的中間。 在表格的 前面有一個空白段落，這就使得頁面的頂端與表格的頂端之 間有一些垂直空間。在表格的后面也有一個空白段落，這就 使得頁面的底端與表格的底端之間也有一些空間。這個表格 包括兩列三行。頂端的單元被合并了，用來放置頁眉，底端 的行也合并了， 以安置頁腳

8、， 而中間那些單元則被分為兩列， 一個供放置主要內(nèi)容，另一個則是導(dǎo)航工具欄。這是一個簡單的例子，詮釋的是一種多年以來廣為人們使用 的技術(shù)。在現(xiàn)今的那些應(yīng)用軟件中，有代表性的主要種包含 了嵌套表格，用以創(chuàng)建一種復(fù)雜得多的版面設(shè)計，不過，它 的復(fù)雜性雖然被人為加大了，它所采用的基本技術(shù)卻并沒有 改變。將居中的設(shè)計轉(zhuǎn)換成使用 CSS 要想將這種傳統(tǒng)的基于表格的版面設(shè)計轉(zhuǎn)換成用 CSS ，你只 要用 divs 來代替那些表格和表格單元就行了。一個 div 取代 表格本身，另一個取代那些單個的表格單元，這些單個的表 格單元定義了主要的版面設(shè)計元素，諸如標(biāo)題，頁腳，導(dǎo)航 工欄，以及主要內(nèi)容。 每個 div

9、 都有一個 id, 且它們的 id 都是 獨(dú)一無二的，你可以用一個 CSS 選擇器來讓它們創(chuàng)建各自 不同的樣式，每一種樣式對應(yīng)于 div 中的一種，這種對應(yīng)關(guān) 系依據(jù) id 而建立。那個取代表格的 div 被標(biāo)上了 id= 外部， 其它那些 div 則靠他們各自的功能來鑒別。這是已校訂過的用 div 代替表格的 XHTML 的編碼： <body><div id=outer><div id=header><h2>Header</h2></div><div id=nav><h4>Navigation&l

10、t;/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 - Loves not times fool.</p> </

11、div><div id=footer><p>Footer text - Admit impediments.</p></div></div></body>注意一下所有那些陳述的格式，原來它們被包括在<table>和<td>標(biāo)簽中，現(xiàn)在已經(jīng)被移走了。 而那些 位于表格前面和后面的空白段落也都不見了。 CSS 格式會處 理所有的格式化以及空間的問題。以下是 CSS 的編碼，就是這些編碼，將頁面設(shè)計成一種居 中的樣式，這種設(shè)計與前面所說的基于表格的設(shè)計很類似： body background-col

12、or: #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;

13、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 編碼與基于表格的版面設(shè)計比起來，它的主體樣式并沒有什么變 化。它只不過設(shè)置了一下背景顏色，默認(rèn)正文字體以及尺寸 大小。div#outer 是其中的一種樣式，它是這一技術(shù)的關(guān)鍵。這就是前面提到過的以 div 取代表格

14、的樣式，它創(chuàng)建了居中的盒 子，而這個盒子成了包容該頁面所有內(nèi)容的容器。將寬度設(shè) 置為 80% 的規(guī)則設(shè)定了該 div 的寬度，就跟表格標(biāo)簽的相應(yīng) 屬性規(guī)定該表格的寬度一樣。 與此相類似， background-color: #FFFFFF 為 div 建立了一個白色的背景，就如同表格中 bgcolor=#FFFFFF 屬性為表格設(shè)置白色背景一樣。 margin-top: 50px and margin-bottom: 50px則用頂端和底端的空白來取代表格中用來造成垂直空間的空白段落。 這一技術(shù)的關(guān)鍵在于，外部 div 的中心要安排合適。這里存 在一個難題，可以說是我們面臨的一個挑戰(zhàn)，即 di

15、v 沒有像 align=center 這樣一個屬性，這與表格不同，表格中有這樣 一種屬性。你可以在div的母元素（在本案例，指&It; body > 標(biāo)簽）中使用 text-align: center 來將外部 div 置于中心位置。 盡管除了正文以外，大多數(shù)瀏覽器還會為一些諸如 div 的塊 元素使用該隊列，但是我們有證據(jù)可以證明它是對排列正文 這一屬性的誤用，而且它會使問題復(fù)雜化，就如同你創(chuàng)建一 些額外的樣式來使那些已按正常標(biāo)準(zhǔn)對齊的文字重新回到 左邊一樣。用 CSS 來將塊元素置于中心位置的正確方法是這樣設(shè)置： margin-Ieft: auto ， margin-right: a

16、uto 。這就指示瀏覽器自動 計算頁面兩邊合適的空白寬度， 從而將 div 置于中心。 border: thin soIid #000000 這一規(guī)則在外部 div 的周圍添加了一個邊 界，這是因為用 CSS 添加很容易，而如果用表格的話就很 難了。 CSS 編碼中的其它部份則規(guī)定了 div 的頁眉，頁腳， nav ，以及主要內(nèi)容。div#header 和 div#footer 則設(shè)定了那些 div 的頁邊空白以及 填料。此外，div#header 包含了 text-align: center 這一規(guī)則， 它可以將頁眉文本置于中心位置， div#footer 則包含了 border-top: thin solid #000000 這一規(guī)則，它可以創(chuàng)建一個 圍繞該 div 的頂端邊緣的邊界， 而在基于表格的版面設(shè)計中， 與它相對應(yīng)的則是位于頁腳上方的一些水平線。在這個居中的盒子的中央， div#nav 和 div#main 建立了兩個 縱列。在 div#nav 樣式中， float: left 這一規(guī)則將 d

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論