欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

一、單行垂直居中

如果一個容器中只有一行文字，對它實現(xiàn)居中相對比較簡單，我們只需要設(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á)不到垂直居中效果了。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　<title> 單行文字實現(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é)講到的實現(xiàn)水平居中時使用到的最后一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種訪求而已?？梢允褂妙愃葡旅娴拇a：

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　<title> 多行文字實現(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屬性只會對擁有valign特性的(X)HTML標(biāo)簽起作用，但是在CSS中還有一個display屬性能夠模擬<table>，所以我們可以使用這個屬性來讓<div>模擬<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設(shè)置在父元素上，后者必須設(shè)置在子元素上，因此我們要為需要定位的文本再增加一個<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> 多行文字實現(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.   

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

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

如果我們對subwrap進(jìn)行了絕對定位，那么content也會繼承了這個這個屬性，雖然它不會在頁面中馬上顯示出來，但是如果再對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中的垂直居中：

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等計算存在問題的瀏覽器中才會有作用。（不過我不解，我查閱了很多文章，不知道是因為出處相同還是什么原因，似乎很多人都不愿意去解釋Internet Exlporer 6中這這個Bug的原理，我也只是了解了一點皮毛，還要再研究）

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　<title> 多行文字實現(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.   

五、完美的解決方案

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

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.   

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. 　　　<title> 多行文字實現(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)鍵字不同。
 
六、實測可以完美實現(xiàn)各種瀏覽器兼容的居中方案　

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

相關(guān)文章

  • CSS水平垂直居中的幾種方法總結(jié)

    這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。
    2016-12-19

  • css讓容器水平垂直居中的7種方式

    這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-10-17

  • 利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局

    這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考
    2016-09-12

  • CSS設(shè)置文字圖片垂直居中的方法總結(jié)

    這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊，文中給出了實例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。
    2016-09-12

  • 深入理解CSS行高line-height與文本垂直居中的原理

    本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理，通過本文的介紹相信對大家以后使用line-height和設(shè)置文本垂直居中會更加熟練，有需要的可以參考借鑒。下面一
    2016-08-12

  • Flexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例

    下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-27

  • CSS文本和div垂直居中方法總結(jié)

    這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下
    2016-07-04

  • CSS 實現(xiàn)垂直居中的幾種方法(必看)

    下面小編就為大家?guī)硪黄狢SS 實現(xiàn)垂直居中的幾種方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-14

  • CSS在固定寬高的div內(nèi)實現(xiàn)垂直居中的實例詳解

    這篇文章主要介紹了CSS在固定寬高的div內(nèi)實現(xiàn)垂直居中的實例詳解,即在div內(nèi)部元素相對于div垂直居中的方法,需要的朋友可以參考下
    2016-06-03

  • CSS實現(xiàn)垂直居中的幾種方法小結(jié)

    在前端布局過程中，我們實現(xiàn)水平居中比較簡單，一般通過margin:0 auto;和父元素 text-align: center;就能實現(xiàn)。今天小編給大家?guī)砹薈SS實現(xiàn)垂直居中的幾種方法小結(jié)，感興
    2019-05-14

最新評論