亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器

  發(fā)布時(shí)間：2016-07-05 14:31:01   作者：佚名   我要評(píng)論
這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在說到這個(gè)問題的時(shí)候，也許有人會(huì)問CSS中不是有vertical-align屬性來設(shè)置垂直居中的嗎？即使是某些瀏覽器不支持我只需做少許的CSS Hack技術(shù)就可以?。∷栽谶@里我還要啰嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(duì)(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>這樣的元素是沒有valign特性的，因此使用vertical-align對(duì)它們不起作用。
Tips: 完美解決方案在文末！

一、單行垂直居中

如果一個(gè)容器中只有一行文字，對(duì)它實(shí)現(xiàn)居中相對(duì)比較簡單，我們只需要設(shè)置它的實(shí)際高度height和所在行的高度line-height相等即可。
如：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. div {      
  2. height:25px;      
  3. line-height:25px;      
  4. overflow:hidden;      
  5. }    
  6.   

這段代碼很簡，后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動(dòng)換行，這樣就達(dá)不到垂直居中效果了。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　<title> 單行文字實(shí)現(xiàn)垂直居中 </title>  
  4. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. 　　<style type="text/css">  
  6. 　　　　body { font-size:12px;font-family:tahoma;}   
  7. 　　div {   
  8. 　　　　height:25px;   
  9. 　　　　line-height:25px;   
  10. 　　　　border:1px solid #FF0099;   
  11. 　　　　background-color:#FFCCFF;   
  12. 　　}   
  13.   
  14. 　　</style>  
  15. </head>  
  16. <body>  
  17.   
  18. 　　<div>現(xiàn)在我們要使這段文字垂直居中顯示！</div>  
  19. </body>  
  20.   
  21. </html>    

二、多行未知高度文字的垂直居中

如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實(shí)現(xiàn)水平居中時(shí)使用到的最后一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種訪求而已?？梢允褂妙愃葡旅娴拇a：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div {      
  2.   
  3. padding:25px;      
  4.   
  5. }    
  6.   

這種方法的優(yōu)點(diǎn)就是它可以在任何瀏覽器上運(yùn)行，并且代碼很簡單，只不過這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　<title> 多行文字實(shí)現(xiàn)垂直居中 </title>  
  4. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.   
  6. 　　<style type="text/css">  
  7.   
  8. 　　　　body { font-size:12px;font-family:tahoma;}   
  9. 　　　　div {   
  10. 　　　　padding:25px;   
  11. 　　　　border:1px solid #FF0099;   
  12. 　　　　background-color:#FFCCFF;   
  13. 　　　　width:760px;   
  14.   
  15. 　　}   
  16. 　　</style>  
  17. </head>  
  18. <body>  
  19. 　　<div><br>　　　　<pre>現(xiàn)在我們要使這段文字垂直居中顯示！   
  20. 　　　　</pre><br>　　</div>  
  21.   
  22. </body>  
  23.   
  24. </html>    
  25.   

三、多行文本固定高度的居中

在本文的一開始，我們已經(jīng)說過CSS中的vertical-align屬性只會(huì)對(duì)擁有valign特性的(X)HTML標(biāo)簽起作用，但是在CSS中還有一個(gè)display屬性能夠模擬<table>，所以我們可以使用這個(gè)屬性來讓<div>模擬<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設(shè)置在父元素上，后者必須設(shè)置在子元素上，因此我們要為需要定位的文本再增加一個(gè)<div>元素：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div#wrap {      
  2. height:400px;      
  3. display:table;      
  4. }      
  5. div#content {      
  6. vertical-align:middle;      
  7. display:table-cell;      
  8. border:1px solid #FF0099;      
  9. background-color:#FFCCFF;      
  10. width:760px;      
  11. }     
  12.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　<title> 多行文字實(shí)現(xiàn)垂直居中 </title>  
  4. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. 　　<style type="text/css">  
  6. 　　　　body { font-size:12px;font-family:tahoma;}   
  7. 　　　　div#wrap {   
  8. 　　　　height:400px;   
  9. 　　　　display:table;   
  10. 　　　　}   
  11. 　　　　div#content {   
  12. 　　　　vertical-align:middle;   
  13. 　　　　display:table-cell;   
  14. 　　　　border:1px solid #FF0099;   
  15. 　　　　background-color:#FFCCFF;   
  16. 　　　　width:760px;   
  17. 　　　　}   
  18. 　　</style>  
  19. </head>  
  20.   
  21. <body>  
  22. 　　<div id="wrap">  
  23. 　　　　<div id="content"><br>　　　　　　   
  24.                <pre><br>現(xiàn)在我們要使這段文字垂直居中顯示！    
  25. 　　　　　　　　div#wrap {   
  26. 　　　　　　　　height:400px;   
  27. 　　　　　　　　display:table;   
  28. 　　　　　　　　}   
  29. 　　　　　　　　div#content {   
  30. 　　　　　　　　vertical-align:middle;   
  31. 　　　　　　　　display:table-cell;   
  32. 　　　　　　　　border:1px solid #FF0099;   
  33. 　　　　　　　　background-color:#FFCCFF;   
  34. 　　　　　　　　width:760px;   
  35. 　　　　　　　　}   
  36.   
  37. 　　　　　　</pre><br>　　　　</div>  
  38.   
  39. 　　</div>  
  40.   
  41. </body>  
  42.   
  43. </html>    
  44.   

這個(gè)方法應(yīng)該是很理想了，但是不幸的是Internet Explorer 6 并不能正確地理解display:table和display:table-cell，因此這種方法在Internet Explorer 6及以下的版本中是無效的。嗯，這讓人很郁悶！不過我們還其它的辦法。
 
四、在Internet Explorer中的解決方案

在Internet Explorer 6及以下版本中，在高度的計(jì)算上存在著缺陷的。在Internet Explorer 6中對(duì)父元素進(jìn)行定位后，如果再對(duì)子元素進(jìn)行百分比計(jì)算時(shí)，計(jì)算的基礎(chǔ)似乎是有繼承性的（如果定位的數(shù)值是絕對(duì)數(shù)值沒有這個(gè)問題，但是使用百分比計(jì)算的基礎(chǔ)將不再是該元素的高度，而從父元素繼承來的定位高度）。
 
例如，我們有下面這樣一個(gè)(X)HTML代碼段：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div id="wrap">     
  2.     <div id="subwrap">     
  3.         <div id="content">     
  4.         </div>     
  5.     </div>   
  6.   
  7. </div>           
  8.   

如果我們對(duì)subwrap進(jìn)行了絕對(duì)定位，那么content也會(huì)繼承了這個(gè)這個(gè)屬性，雖然它不會(huì)在頁面中馬上顯示出來，但是如果再對(duì)content進(jìn)行相對(duì)定位的時(shí)候，你使用的100%分比將不再是content原有的高度。例如，我們?cè)O(shè)定了subwrap的position為40%，我們?nèi)绻胧筩ontent的上邊緣和wrap重合的話就必須設(shè)置top:-80%;那么，如果我們?cè)O(shè)定subwrap的top:50%的話，我們必須使用100%才能使content回到原來的位置上去，但是如果我們把content也設(shè)置50%呢？那么它就正好垂直居中了。所以我們可以使用這中方法來實(shí)現(xiàn)Internet Explorer 6中的垂直居中：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div#wrap {      
  2. border:1px solid #FF0099;      
  3. background-color:#FFCCFF;      
  4. width:760px;      
  5. height:400px;      
  6. position:relative;      
  7. }      
  8. div#subwrap {      
  9. position:absolute;      
  10. border:1px solid #000;      
  11. top:50%;      
  12. }      
  13. div#content {      
  14. border:1px solid #000;      
  15. position:relative;      
  16. top:-50%;      
  17. }    
  18.   

當(dāng)然，這段代碼只能在Internet Exlporer 6等計(jì)算存在問題的瀏覽器中才會(huì)有作用。（不過我不解，我查閱了很多文章，不知道是因?yàn)槌鎏幭嗤€是什么原因，似乎很多人都不愿意去解釋Internet Exlporer 6中這這個(gè)Bug的原理，我也只是了解了一點(diǎn)皮毛，還要再研究）

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　<title> 多行文字實(shí)現(xiàn)垂直居中 </title>  
  4. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. 　　<style type="text/css">  
  6. 　　　　body { font-size:12px;font-family:tahoma;}   
  7. 　　　　div#wrap {   
  8. 　　　　　　border:1px solid #FF0099;   
  9. 　　　　　　background-color:#FFCCFF;   
  10. 　　　　　　width:760px;   
  11. 　　　　　　height:400px;   
  12. 　　　　　　position:relative;   
  13. 　　　　}   
  14. 　　　　div#subwrap {   
  15. 　　　　　　position:absolute;   
  16. 　　　　　　top:50%;   
  17. 　　　　}   
  18. 　　　　div#content {   
  19. 　　　　　　position:relative;   
  20. 　　　　　　top:-50%;   
  21. 　　　　}   
  22. 　　</style>  
  23. </head>  
  24. <body>    
  25. 　　<div id="wrap">  
  26. 　　　　<div id="subwrap">  
  27. 　　　　　　<div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示！   
  28. 　　　　　　　　div#wrap {   
  29. 　　　　　　　　　　border:1px solid #FF0099;   
  30. 　　　　　　　　　　background-color:#FFCCFF;   
  31. 　　　　　　　　　　width:760px;   
  32. 　　　　　　　　　　height:500px;   
  33. 　　　　　　　　　　position:relative;   
  34.   
  35. 　　　　　　　　}   
  36. 　　　　　　　　div#subwrap {   
  37. 　　　　　　　　　　position:absolute;   
  38. 　　　　　　　　　　border:1px solid #000;   
  39. 　　　　　　　　　　top:50%;   
  40. 　　　　　　　　}   
  41. 　　　　　　　　div#content {   
  42.   
  43. 　　　　　　　　　　border:1px solid #000;   
  44.   
  45. 　　　　　　　　　　position:relative;   
  46.   
  47. 　　　　　　　　　　top:-50%;   
  48. 　　　　　　　　}<br>　　　　　　　　</pre>  
  49. 　　　　　　</div>  
  50. 　　　　</div>  
  51. 　　</div>  
  52. </body>  
  53. </html>　    
  54.   

五、完美的解決方案

那么我們綜合上面兩種方法就可以得到一個(gè)完美的解決方案，不過這要用到CSS hack的知識(shí)。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div#wrap {      
  2. display:table;      
  3. border:1px solid #FF0099;      
  4. background-color:#FFCCFF;      
  5. width:760px;      
  6. height:400px;      
  7. _position:relative;      
  8. overflow:hidden;      
  9. }      
  10. div#subwrap {      
  11. vertical-align:middle;      
  12. display:table-cell;      
  13. _position:absolute;      
  14. _top:50%;      
  15. }      
  16. div#content {      
  17. _position:relative;      
  18. _top:-50%;      
  19.   
  20. }    
  21.   

至此，一個(gè)完美的居中方案就產(chǎn)生了。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　　<title> 多行文字實(shí)現(xiàn)垂直居中 </title>  
  4. 　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. 　　<style type="text/css">  
  6. 　　　　body { font-size:12px;font-family:tahoma;}   
  7. 　　　　div#wrap {   
  8. 　　　　　　display:table;   
  9. 　　　　　　border:1px solid #FF0099;   
  10. 　　　　　　background-color:#FFCCFF;   
  11. 　　　　　　width:760px;   
  12. 　　　　　　height:400px;   
  13. 　　　　　　_position:relative;   
  14. 　　　　　　overflow:hidden;   
  15. 　　　　}   
  16. 　　　　div#subwrap {   
  17. 　　　　　　vertical-align:middle;   
  18. 　　　　　　display:table-cell;   
  19. 　　　　　　_position:absolute;   
  20. 　　　　　　_top:50%;   
  21. 　　　　}   
  22. 　　　　div#content {    
  23. 　　　　　　_position:relative;   
  24. 　　　　　　_top:-50%;   
  25. 　　　　}   
  26. 　　</style>  
  27. </head>  
  28. <body>  
  29. 　　<div id="wrap">  
  30. 　　　　<div id="subwrap">  
  31. 　　　　　　<div id="content"><br>　　　　　　　　   
  32.                <pre>現(xiàn)在我們要使這段文字垂直居中顯示！   
  33. 　　　　　　　　　　div#wrap {   
  34. 　　　　　　　　　　　　border:1px solid #FF0099;   
  35. 　　　　　　　　　　　　background-color:#FFCCFF;   
  36. 　　　　　　　　　　　　width:760px;   
  37. 　　　　　　　　　　　　height:500px;   
  38. 　　　　　　　　　　　　position:relative;   
  39. 　　　　　　　　　　}   
  40. 　　　　　　　　　　div#subwrap {   
  41. 　　　　　　　　　　　　position:absolute;   
  42. 　　　　　　　　　　　　border:1px solid #000;   
  43. 　　　　　　　　　　　　top:50%;   
  44. 　　　　　　　　　　}   
  45. 　　　　　　　　　　div#content {   
  46. 　　　　　　　　　　　　border:1px solid #000;   
  47. 　　　　　　　　　　　　position:relative;   
  48. 　　　　　　　　　　　　top:-50%;   
  49. 　　　　　　　　　　}<br>　　　　　　　　</pre>  
  50. 　　　　　　</div>  
  51.   
  52. 　　　　</div>  
  53. 　　</div>  
  54. </body>  
  55. </html>    
  56.   

PS:垂直居中vertical-align的值是middle，而水平居中align的值是center，雖然同是居中但關(guān)鍵字不同。
 
六、實(shí)測可以完美實(shí)現(xiàn)各種瀏覽器兼容的居中方案　

下面這段代碼經(jīng)過實(shí)測，可以完美兼容IE7以上的IE瀏覽器，其它標(biāo)準(zhǔn)瀏覽器如火狐、谷歌等也沒有問題。
 
說明：盡管有CSS的vertical-align特性，但是并不能有效解決未知高度的垂直居中問題（在一個(gè)DIV標(biāo)簽里有未知高度的文本或圖片的情況下）。標(biāo)準(zhǔn)瀏覽器如Mozilla, Opera, Safari等.，可將父級(jí)元素顯示方式設(shè)定為TABLE(display: table;) ，內(nèi)部子元素定為table-cell (display: table-cell),通過vertical-align特性使其垂直居中，但非標(biāo)準(zhǔn)瀏覽器是不支持的。非標(biāo)準(zhǔn)瀏覽器只能在子元素里設(shè)距頂部50%，里面再套個(gè)元素距頂部-50% 來抵消。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. 　　<meta charset="utf-8">  
  5. 　　<title>水平垂直居中</title>  
  6. 　　<style type="text/css">  
  7. 　　　　body {padding: 0; margin: 0;}   
  8. 　　　　body,html{height: 100%;}   
  9. 　　　　#outer {height: 100%; overflow: hidden; position: relative;width: 100%;}   
  10. 　　　　#outer[id] {display: table; position: static;}   
  11. 　　　　#middle {position: absolute; top: 50%;} /* for explorer only*/   
  12. 　　　　#middle[id] {display: table-cell; vertical-align: middle; position: static;}   
  13. 　　　　#inner {position: relative; top: -50%;margin: 0 auto;} /* for explorer only */   
  14. 　　　　div.greenBorder {width:500px;height:584px;background:#333;}   
  15. 　　　　*+html #outer[id]{position: relative;}   
  16. 　　　　*+html #middle[id]{position: absolute; }   
  17. 　　</style>  
  18.   
  19. </head>  
  20. <body>  
  21. 　　<div id="outer">  
  22. 　　　　<div id="middle">  
  23. 　　　　　　<div id="inner" class="greenBorder">  
  24. 　　　　　　</div>  
  25. 　　　　</div>  
  26. 　　</div>  
  27. </body>  
  28.   
  29. </html>    
  30.   

以上CSS代碼的優(yōu)點(diǎn)是沒有hacks，采用了IE不支持的CSS2選擇器#value[id]。
 
CSS2選擇器#value[id]相當(dāng)于選擇器#value，但是Internet Explorer不支持這種類型的選擇器。同樣地.value[class]，相當(dāng)于.value,這些只有標(biāo)準(zhǔn)瀏覽器能讀懂。
 
測試：Firefox1.5、Opera9.0、IE6.0、IE5.0通過。上面的代碼不支持IE7，還需要在最下面加二句：

*+html #outer[id]{position: relative;}
*+html #middle[id]{position: absolute; }

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論