css-文本垂直居中_第1頁
css-文本垂直居中_第2頁
css-文本垂直居中_第3頁
css-文本垂直居中_第4頁
css-文本垂直居中_第5頁
已閱讀5頁，還剩7頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

2、;一、單行垂直居中 如果一個容器中只有一行文字，對它實現(xiàn)居中相對比較簡單，我們只需要設(shè)置它的實際高度height和所在行的高度line-height相等即可。如： （愛摩客）提供的代碼片段： div     height:25px;    line-height:25px;    overflow:hidden;  這段代碼很簡單，后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動換行，這樣就達(dá)不到

3、垂直居中效果了。 （愛摩客）提供的代碼片段： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="/1999/xhtml">    <head>   

4、   <title> 單行文字實現(xiàn)垂直居中 </title>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <style type="text/css">    

5、60;   body font-size:12px;font-family:tahoma;        div           height:25px;          line-height:25px;      

6、60;   border:1px solid #FF0099;          background-color:#FFCCFF;              </style>    </head>    <body&g

7、t;      <div>現(xiàn)在我們要使這段文字垂直居中顯示！</div>    </body>  </html>不過在Internet Explorer 6及以下版本中，這和方法不支持對圖片設(shè)置垂直居中。 二、多行未知高度文字的垂直居中 如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實現(xiàn)水平居中時使用到的最后一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“

8、看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種方式而已。可以使用類似下面的代碼： （愛摩客）提供的代碼片段： div     padding:25px;  這種方法的優(yōu)點就是它可以在任何瀏覽器上運行，并且代碼很簡單，只不過這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的。 （愛摩客）提供的代碼片段： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:

9、//TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="/1999/xhtml">    <head>      <title> 多行文字實現(xiàn)垂直居中 </title>      <meta http-

10、equiv="Content-Type" content="text/html; charset=utf-8" />      <style type="text/css">        body font-size:12px;font-family:tahoma;        div  

11、;         padding:25px;          border:1px solid #FF0099;          background-color:#FFCCFF;          wi

12、dth:760px;              </style>    </head>    <body>      <div><pre>現(xiàn)在我們要使這段文字垂直居中顯示！       &#

13、160;div           padding:25px;          border:1px solid #FF0099;          background-color:#FFCCFF;        &

14、#160;     </pre></div>    </body>  </html>三、多行文本固定高度的居中 在本文的一開始，我們已經(jīng)說過CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標(biāo)簽起作用，但是在CSS中還有一個display屬性能夠模擬<table>，所以我們可以使用這個屬性來讓<div>模擬<table>就可以使用vertical-align了

15、。注意，display:table和display:table-cell的使用方法，前者必須設(shè)置在父元素上，后者必須設(shè)置在子元素上，因此我們要為需要定位的文本再增加一個<div>元素： （愛摩客）提供的代碼片段： div#wrap     height:400px;    display:table;    div#content     vertical-align:middle;  

16、;  display:table-cell;    border:1px solid #FF0099;    background-color:#FFCCFF;    width:760px;    （愛摩客）提供的代碼片段： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3

17、.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="/1999/xhtml">     <head>       <title> 多行文字實現(xiàn)垂直居中 </title>      

18、60;<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <style type="text/css">         body font-size:12px;font-family:tahoma;    

19、0;      div#wrap            height:400px;           display:table;               

20、0;  div#content            vertical-align:middle;           display:table-cell;           border:1px solid #FF0099; 

21、0;         background-color:#FFCCFF;           width:760px;                </style>     &

22、lt;/head>     <body>       <div id="wrap">         <div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示！         

23、60; div#wrap              height:400px;             display:table;                

24、60;     div#content              vertical-align:middle;             display:table-cell;         

25、0;   border:1px solid #FF0099;             background-color:#FFCCFF;             width:760px;          &#

26、160;        </pre></div>       </div>     </body>   </html>這個方法應(yīng)該是很理想了，但是不幸的是Internet Explorer 6 并不能正確地理解display:table和display:table-cell，因此這種方法在Inter

27、net Explorer 6及以下的版本中是無效的。嗯，這讓人很郁悶！不過我們還其它的辦法。 四、在Internet Explorer中的解決方案 在Internet Explorer 6及以下版本中，在高度的計算上存在著缺陷的。在Internet Explorer 6中對父元素進(jìn)行定位后，如果再對子元素進(jìn)行百分比計算時，計算的基礎(chǔ)似乎是有繼承性的（如果定位的數(shù)值是絕對數(shù)值沒有這個問題，但是使用百分比計算的基礎(chǔ)將不再是該元素的高度，而從父元素繼承來的定位高度）。例如，我們有下面這樣一個(X)HTML代碼段： （愛摩客）提供的代碼片段： <div i

28、d="wrap">    <div id="subwrap">      <div id="content">      </div>    </div>  </div>如果我們對subwrap進(jìn)行了絕對定位，那么content也會繼承了這個屬性，雖然它

29、不會在頁面中馬上顯示出來，但是如果再對content進(jìn)行相對定位的時候，你使用的100%分比將不再是content原有的高度。例如，我們設(shè)定了subwrap的position為40%，我們?nèi)绻胧筩ontent的上邊緣和wrap重合的話就必須設(shè)置top:-80%;那么，如果我們設(shè)定subwrap的top:50%的話，我們必須使用100%才能使content回到原來的位置上去，但是如果我們把content也設(shè)置50%呢？那么它就正好垂直居中了。所以我們可以使用這中方法來實現(xiàn)Internet Explorer 6中的垂直居中： （愛摩客）提供的代碼片段： div#wrap &#

30、160;   border:1px solid #FF0099;    background-color:#FFCCFF;     width:760px;    height:400px;    position:relative;    div#subwrap     position:absolute; 

31、;   border:1px solid #000;    top:50%;    div#content     border:1px solid #000;    position:relative;    top:-50%;  當(dāng)然，這段代碼只能在Internet Exlporer 6等計算存在問題的瀏覽器中才會有作用。（不過我不解，我查閱了

32、很多文章，不知道是因為出處相同還是什么原因，似乎很多人都不愿意去解釋Internet Exlporer 6中這個Bug的原理，我也只是了解了一點皮毛，還要再研究） （愛摩客）提供的代碼片段： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="/1

33、999/xhtml">    <head>      <title> 多行文字實現(xiàn)垂直居中 </title>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     

34、; <style type="text/css">        body font-size:12px;font-family:tahoma;        div#wrap           border:1px solid #FF0099;    &

35、#160;     background-color:#FFCCFF;          width:760px;          height:400px;          position:relative;   

36、;             div#subwrap           position:absolute;          top:50%;          

37、60;     div#content             position:relative;            top:-50%;              

38、</style>    </head>    <body>      <div id="wrap">        <div id="subwrap">          <

39、div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示！            div#wrap               border:1px solid #FF0099;        

40、0;     background-color:#FFCCFF;              width:760px;              height:500px;        &#

41、160;     position:relative;                        div#subwrap               position

42、:absolute;              border:1px solid #000;              top:50%;               &#

43、160;        div#content               border:1px solid #000;              position:relative;    

44、0;         top:-50%;                     </pre></div>        </div>    &

45、#160; </div>    </body>  </html>五、完美的解決方案 那么我們綜合上面兩種方法就可以得到一個完美的解決方案，不過這要用到CSS hack的知識。對于如果使用CSS Hack來區(qū)分瀏覽器，你可以參考這篇“簡單CSS hack：區(qū)分IE6、IE7、IE8、Firefox、Opera”： （愛摩客）提供的代碼片段： div#wrap     display:table;  &#

46、160; border:1px solid #FF0099;    background-color:#FFCCFF;    width:760px;    height:400px;    _position:relative;    overflow:hidden;    div#subwrap     

47、vertical-align:middle;    display:table-cell;    _position:absolute;    _top:50%;    div#content     _position:relative;    _top:-50%;   至此，一個完美的居中方案就產(chǎn)生了。 （愛摩客）

48、提供的代碼片段： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="/1999/xhtml">    <head>      &

49、lt;title> 多行文字實現(xiàn)垂直居中 </title>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <style type="text/css">       

50、0;body font-size:12px;font-family:tahoma;        div#wrap           display:table;          border:1px solid #FF0099;       &

51、#160;  background-color:#FFCCFF;          width:760px;          height:400px;          _position:relative;     

52、0;    overflow:hidden;                div#subwrap           vertical-align:middle;          display:

53、table-cell;          _position:absolute;          _top:50%;                div#content      

54、60;    _position:relative;          _top:-50%;              </style>    </head>    <body>  &

55、#160;   <div id="wrap">        <div id="subwrap">          <div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示！          

溫馨提示

  • 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

提交評論