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

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

  發(fā)布時間：2016-07-04 14:33:53   作者：佚名   我要評論
這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下

在樣式布局中，我們經(jīng)常碰到需要將元素居中。通過css實現(xiàn)元素的水平居中較為簡單：對文本，只需要對其父級元素設(shè)置text-align: center;，而對div等塊級元素，只需要設(shè)置其left和right的margin值為auto。要實現(xiàn)元素的垂直居中，有人會想到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。因此我們需要通過別的方法去實現(xiàn)元素的垂直居中，下面我總結(jié)了幾種了常用垂直居中方法。

單行文本垂直居中

對于單行文本，我們只需要將文本行高(line-height)和所在區(qū)域高度(height)設(shè)為一致即可：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--html代碼-->  
  2.     <div id="div1">  
  3.         這是單行文本垂直居中   
  4.     </div>  
  5.   
  6. /*css代碼*/   
  7.         #div1{   
  8.             width: 300px;   
  9.             height: 100px;   
  10.             margin: 50px auto;   
  11.             border: 1px solid red;   
  12.             line-height: 100px; /*設(shè)置line-height與父級元素的height相等*/   
  13.             text-align: center; /*設(shè)置文本水平居中*/   
  14.             overflow: hidden; /*防止內(nèi)容超出容器或者產(chǎn)生自動換行*/   
  15.         }   

多行文本垂直居中

多行文本垂直居中分為兩種情況，一個是父級元素高度不固定，隨著內(nèi)容變化；另一個是父級元素高度固定。

父級元素高度不固定

父級高度不固定的時，高度只能通過內(nèi)部文本來撐開。這樣，我們可以通過設(shè)置內(nèi)填充（padding）的值來使文本看起來垂直居中，只需設(shè)置padding-top和padding-bottom的值相等：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--html代碼-->  
  2.     <div id="div1">  
  3.             這是多行文本垂直居中，   
  4.             這是多行文本垂直居中，   
  5.             這是多行文本垂直居中，   
  6.             這是多行文本垂直居中。   
  7.     </div>  
  8.   
  9. /*css代碼*/   
  10.         #div1{   
  11.             width: 300px;   
  12.             margin: 50px auto;   
  13.             border: 1px solid red;   
  14.             text-align: center; /*設(shè)置文本水平居中*/   
  15.             padding: 50px 20px;   
  16.         }   
  17.   

父級元素高度固定

本文一開始就提到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，結(jié)合display: table;，可以使得div模擬table屬性。因此我們可以設(shè)置父級div的display屬性：display: table;；然后再添加一個div包含文本內(nèi)容，設(shè)置其display:table-cell;和vertical-align:middle;。具體代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--html代碼-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             這是固定高度多行文本垂直居中，   
  5.             這是固定高度多行文本垂直居中，   
  6.             這是固定高度多行文本垂直居中，   
  7.             這是固定高度多行文本垂直居中。   
  8.         </div>  
  9.     </div>  
  10.   
  11. /*css代碼*/   
  12.         #outer{   
  13.             width: 400px;   
  14.             height: 200px;   
  15.             margin: 50px auto;   
  16.             border: 1px solid red;   
  17.             display: table;   
  18.         }   
  19.         #middle{    
  20.             display:table-cell;    
  21.             vertical-align:middle;     
  22.             text-align: center; /*設(shè)置文本水平居中*/     
  23.             width:100%;      
  24.         }   
  25.   

但是，在IE7中顯示效果如下：

這是因為IE7及以下的版本并不能很好的支持display:table和display:table-cell屬性，當(dāng)然，如果你不考慮IE7以下的版本的瀏覽器，上述方法是可以實現(xiàn)垂直居中。如果把IE7及以下版本考慮進(jìn)去，我們可以通過用到CSS hack的知識來設(shè)置針對不同瀏覽器的屬性。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--html代碼-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             <div id="content">  
  5.                 這是固定高度多行文本垂直居中(兼容IE7)，   
  6.                 這是固定高度多行文本垂直居中(兼容IE7)，   
  7.                 這是固定高度多行文本垂直居中(兼容IE7)，   
  8.                 這是固定高度多行文本垂直居中(兼容IE7)。   
  9.             </div>  
  10.         </div>  
  11.     </div>  
  12.   
  13. /*css代碼*/   
  14.         #outer{   
  15.             width: 400px;   
  16.             height: 200px;   
  17.             margin: 50px auto;   
  18.             border: 1px solid red;   
  19.             display: table;   
  20.             *position:relative;  //兼容IE7及以下版本   
  21.         }   
  22.         #middle{    
  23.             display:table-cell;    
  24.             vertical-align:middle;     
  25.             text-align: center; /*設(shè)置文本水平居中*/     
  26.             width:100%;   
  27.             *position:absolute;   //兼容IE7及以下版本   
  28.             *top:50%;     
  29.         }   
  30.         #content {     
  31.            *position:relative;  //兼容IE7及以下版本    
  32.            *top:-50%;     
  33.         }   
  34.   

子div垂直居中

1、根據(jù)子div具體大小設(shè)置偏移

如果子div固定大小，設(shè)定水平和垂直偏移父元素的50%，再根據(jù)實際長度將子元素向上和向左挪回一半大小

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--html代碼-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             子div(固定大小)垂直居中   
  5.         </div>             
  6.     </div>  
  7.   
  8. /*css代碼*/   
  9.         #outer{   
  10.                 background-color: #13CDF4;   
  11.                 width: 300px;   
  12.                 height: 200px;   
  13.                 position: relative;   
  14.         }   
  15.         #middle{    
  16.                 background-color: #E41627;   
  17.                 width: 100px;   
  18.                 height: 100px;   
  19.                 margin: auto;   
  20.                 position: absolute;   
  21.                 left: 50%;    
  22.                 top: 50%;   
  23.                 margin-left: -50px;   
  24.                 margin-top: -50px;   
  25.         }   
  26.   

該方法兼容IE7、IE6，但是只針對子div大小的固定的情況下才有效。大部分時候，子div的大小是不固定的，下面介紹子div大小不固定時的方法。由于顯示效果與這個效果基本一樣，效果圖就不一一貼出來，讀者可以自行復(fù)制代碼驗證。

2、利用translate

針對第一種方法中水平和垂直偏移父元素的50%后，不設(shè)置margin值，而是利用除css3中的transform屬性設(shè)置translate的值，css代碼部分改成如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #middle{    
  2.         background-color: #E41627;   
  3.         width: 100px;   
  4.         height: 100px;   
  5.         margin: auto;   
  6.         position: absolute;   
  7.         left: 50%;    
  8.         top: 50%;   
  9.         transform: translateX(-50%) translateY(-50%);   
  10.         -webkit-transform: translateX(-50%) translateY(-50%);   
  11.     }   
  12.   

這種方法需要注意transform是css3中的屬性，使用時注意瀏覽器的兼容性，IE9之前的版本不支持。

3、利用絕對布局absolute

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--html代碼-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             利用絕對定位實現(xiàn)子div大小不固定垂直居中   
  5.         </div>             
  6.     </div>  
  7.   
  8. /*css代碼*/   
  9.         #outer{   
  10.             background-color: #13CDF4;   
  11.             width: 300px;   
  12.             height: 200px;   
  13.             position: relative;   
  14.         }   
  15.         #middle{    
  16.             background-color: #E41627;   
  17.             width: 100px;   //子div大小可隨意設(shè)置   
  18.             height: 100px;   
  19.             margin: auto;   
  20.             position: absolute;   
  21.             top: 0;left: 0;right: 0;bottom: 0;   
  22.         }   
  23.   

該方法不兼容IE7、IE6

4、利用vertical-align

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--html代碼-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             利用vertical-align屬性實現(xiàn)子div大小不固定垂直居中   
  5.         </div>             
  6.     </div>  
  7.   
  8. /*css代碼*/   
  9.         #outer{   
  10.             background-color: #13CDF4;   
  11.             width: 300px;   
  12.             height: 200px;   
  13.             display: table-cell;    
  14.             vertical-align: middle;   
  15.         }   
  16.         #middle{    
  17.             background-color: #E41627;   
  18.             width: 100px;   
  19.             height: 100px;   
  20.             margin: 0 auto;   
  21.         }   
  22.   

這種方法是將div轉(zhuǎn)變成table-cell顯示，然后通過vertical-align: middle;再設(shè)置其子元素垂直居中，這種方法和上面設(shè)置父級元素高度固定時多行文本居中的方法一樣，所以這種方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以參照上面的代碼，上面設(shè)置父級元素高度固定時多行文本居中的方法其實就是將最里面的div垂直居中。這里我就不重述了。

5、利用display: flex

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--html代碼-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             利用display: flex實現(xiàn)子div大小不固定垂直居中   
  5.         </div>             
  6.     </div>  
  7.   
  8. /*css代碼*/   
  9.         #outer{   
  10.             background-color: #13CDF4;   
  11.             width: 300px;   
  12.             height: 200px;   
  13.             display: flex;   
  14.             justify-content: center;/*實現(xiàn)水平居中*/   
  15.             align-items:center; /*實現(xiàn)垂直居中*/   
  16.         }   
  17.         #middle{    
  18.             background-color: #E41627;   
  19.             width: 100px;   
  20.             height: 100px;   
  21.         }   
  22.   

這種方法只需要在父級div中加上這三句話就行，但是在IE中兼容性不好，IE9及以下IE瀏覽器版本都不支持。

以上是我總結(jié)的一些常用到的垂直居中的設(shè)計方法，大家可以根據(jù)自己的需要選擇合適的設(shè)計方式。

原文鏈接：http://blog.csdn.net/u014607184/article/details/51820508

相關(guān)文章

最新評論