CSS教程div垂直居中的N種方法_第1頁
CSS教程div垂直居中的N種方法_第2頁
CSS教程div垂直居中的N種方法_第3頁
CSS教程div垂直居中的N種方法_第4頁
CSS教程div垂直居中的N種方法_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、在說到這個問題的時候，也許有人會問CSS中不是有vertical-align屬性來設(shè)置垂直居中的嗎？即使是某些瀏覽器不支持我只需做少許的CSSHack技術(shù)就可以啊！所以在這里我還要啰嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(X)HTML元素中擁有 valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。 相關(guān)教程：div水平居中的N種方法 一、單行垂直居中 如果

2、一個容器中只有一行文字，對它實現(xiàn)居中相對比較簡單，我們只需要設(shè)置它的實際高度height和所在行的高度line-height相等即可。如： div height:25px; line-height:25px; overflow:hidden; 這段代碼很簡，后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動換行，這樣就達不到垂直居中效果了。更多CSS教程。 <head> <title> 單行文字實現(xiàn)垂直居中 </title> <meta http-equiv="Content-Type" content=

3、"text/html; charset=utf-8" /> <style type="text/css"> body font-size:12px;font-family:tahoma; div height:25px; line-height:25px; border:1px solid #FF0099; background-color:#FFCCFF; </style> </head> <body> <div>現(xiàn)在我們要使這段文字垂直居中顯示！</div> </bo

4、dy></html>二、多行未知高度文字的垂直居中 如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實現(xiàn)水平居中時使用到的最后一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種訪求而已?？梢允褂妙愃葡旅娴拇a： div padding:25px; 這種方法的優(yōu)點就是它可以在任何瀏覽器上運行，并且代碼很簡單，只不過這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的。 <head> <title> 多行文字實現(xiàn)垂直居中 </ti

5、tle> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body font-size:12px;font-family:tahoma; div padding:25px; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; </style> </head> <

6、body> <div><pre>現(xiàn)在我們要使這段文字垂直居中顯示！ div padding:25px; border:1px solid #FF0099; background-color:#FFCCFF; </pre></div> </body></html>三、多行文本固定高度的居中 在本文的一開始，我們已經(jīng)說過CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標簽起作用，但是在CSS中還有一個display屬性能夠模擬<table>，所以我們可以使用這個屬性來讓&l

7、t;div>模擬<table>就可以使用 vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設(shè)置在父元素上，后者必須設(shè)置在子元素上，因此我們要為需要定位的文本再增加一個<div>元素： div#wrap height:400px; display:table; div#content vertical-align:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px

8、; <head> <title> 多行文字實現(xiàn)垂直居中 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body font-size:12px;font-family:tahoma; div#wrap height:400px; display:table; div#content vertical-align:midd

9、le; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; </style> </head> <body> <div id="wrap"> <div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示！ Webjx.Com div#wrap height:400px; display:table; div#content vertical-align

10、:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; </pre></div></div> </body></html> 這個方法應(yīng)該是很理想了，但是不幸的是Internet Explorer 6 并不能正確地理解display:table和display:table-cell，因此這種方法在Internet Explorer 6及以下的版本中是無效的。嗯，這讓人很郁悶！不過我們還其它的辦法 四、在In

11、ternet Explorer中的解決方案 在Internet Explorer 6及以下版本中，在高度的計算上存在著缺陷的。在Internet Explorer 6中對父元素進行定位后，如果再對子元素進行百分比計算時，計算的基礎(chǔ)似乎是有繼承性的（如果定位的數(shù)值是絕對數(shù)值沒有這個問題，但是使用百分比計算的基礎(chǔ)將不再是該元素的高度，而從父元素繼承來的定位高度）。例如，我們有下面這樣一個(X)HTML代碼段： <div id="wrap"> <div id="subwrap"> <div id="content&quo

12、t;> </div> </div></div> 如果我們對subwrap進行了絕對定位，那么content也會繼承了這個這個屬性，雖然它不會在頁面中馬上顯示出來，但是如果再對content進行相對定位的時候，你使用的100%分比將不再是content原有的高度。例如，我們設(shè)定了subwrap的position為40%，我們?nèi)绻胧筩ontent的上邊緣和wrap重合的話就必須設(shè)置top:-80%;那么，如果我們設(shè)定subwrap的top:50%的話，我們必須使用100%才能使 content回到原來的位置上去，但是如果我們把content也設(shè)置50%呢

13、？那么它就正好垂直居中了。所以我們可以使用這中方法來實現(xiàn)Internet Explorer 6中的垂直居中： div#wrap border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative; div#subwrap position:absolute; border:1px solid #000; top:50%; div#content border:1px solid #000; position:relative; top:-50%; 當然，這段代碼只能在I

14、nternet Exlporer 6等計算存在問題的瀏覽器中才會有作用。（不過我不解，我查閱了很多文章，不知道是因為出處相同還是什么原因，似乎很多人都不愿意去解釋Internet Exlporer 6中這這個Bug的原理，我也只是了解了一點皮毛，還要再研究） <head> <title> 多行文字實現(xiàn)垂直居中 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="

15、text/css"> body font-size:12px;font-family:tahoma; div#wrap border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative; div#subwrap position:absolute; top:50%; div#content position:relative; top:-50%; </style> </head> <body> <div id=

16、"wrap"> <div id="subwrap"> <div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示！ div#wrap border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:500px; position:relative; div#subwrap position:absolute; border:1px solid #000; top:50%; div#content

17、 border:1px solid #000; position:relative; top:-50%; </pre> </div> </div></div> </body></html>五、完美的解決方案 那么我們綜合上面兩種方法就可以得到一個完美的解決方案，不過這要用到CSS hack的知識。對于如果使用CSS Hack來區(qū)分瀏覽器，你可以參考這篇“簡單CSS hack：區(qū)分IE6、IE7、IE8、Firefox、Opera”： div#wrap display:table; border:1px solid #FF0

18、099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden; div#subwrap vertical-align:middle; display:table-cell; _position:absolute; _top:50%; div#content _position:relative; _top:-50%; 至此，一個完美的居中方案就產(chǎn)生了。 <head> <title> 多行文字實現(xiàn)垂直居中 </title> <me

19、ta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body font-size:12px;font-family:tahoma; div#wrap display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden; div#subwrap vertical-align:middle; disp

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論