碼上快樂

相關內容    簡體    繁體

CSS 水平居中，垂直居中

本文轉載自   查看原文   2013-01-06 22:46   6881 

CSS之居中

 
CSS的居中會遇到很多種情況，不同的情況使用的方法不同。
 
 

1．水平居中

 

    (1)文本、圖片等行內元索的水平居中
    給父元素設置 text-align: center可以實現文本、圖片等行內元素的水平居中，如代碼清單1所示。

 

代碼清單1      行內元素的水平居中 
  1. <style type="text/CSS"> 
  2.  .wrap{
  3. background:#000; width:500px; height:100px; 
  4. margin-bottom:10px; color:#fff; text-align:center}  
  5. </style> 
  6. <div class="wrap">hello world</div> 
  7. <div class="wrap"><img src="test.gif" /></div> 

 效果如圖1，圖2所示：

文本元素行內水平居中

圖1   文本元素行內水平居中

 

圖片元素行內水平居中
圖2   圖片元素行內水平居中
 
 
    (2)確定寬度的塊級元素的水平居中
    確定寬度的塊級元素水平居中是通過設置 margin-left:auto和margin.right:auto來實現的，如代碼清單2 所示。
   
 
代碼清單2      確定寬度的塊級元素的水平居中  
  1.  <style type="text/CSS"> 
  2.  .wrap{background:#000; width:500px; height:100px}  
  3.  .test{background:red; width:200px; height:50px; margin-left:auto;  
  4. right:auto}  
  5. </style> 
  6. <div class="wrap"><div class="test"></div></div> 

 

效果如圖3 所示。
塊級元素水平居中

圖3    塊級元素水平居中
 

 
 
    (3)不確定寬度的塊級元素的水平居中
    不確定寬度的塊級元素有三種方式可以實現居中。以分頁模塊為例，因為分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。
 
 
方法一如代碼清單3所示。
 
 
     代碼清單3     不確定寬度的塊級元素的水平居中方法一
  1. <style type="text/CSS"> 
  2. ul{list-style:none; margin:0; padding:0}  
  3. table{margin-left:auto; margin-right:auto;}  
  4.  .test li{float:left; display:inline; margin-right:5px;}  
  5.  .test a{
  6. float:left; width:20px; height:20px; text-align:center; 
  7. line- height:20px;   background:#316AC5;   
  8. color:#fff; border:1px solid #316AC5; text-decoration:none;}  
  9.  .test a:hover{background:#fff; color:#316AC5}  
  10. </style> 
  11. <div class="wrap"> 
  12.          <table><tbody><tr><td> 
  13.                           <ul class="test"> 
  14.                                 <li><a href="#">1</a></li> 
  15.                           </ul> 
  16.          </td></tr></tbody></table> 
  17.          <table><tbody><tr><td> 
  18.                           <ul class="test"> 
  19.                                 <li><a href-"#">1</a></li> 
  20.                                 <li><a href="#">2</a></li> 
  21.                                 <li><a href="#">3</a></li> 
  22.                           </ul> 
  23.          </td></tr></tbody></table> 
  24.          <table><tbody><tr><td> 
  25.                           <ul class="test"> 
  26.                                <li><a href="#">l</a></li> 
  27.                                <li><a href="#">2</a></li> 
  28.                                <li><a href-"#">3</a></li> 
  29.                                <li><a href="#">4</a></li> 
  30.                                <li><a href-"#">5</a></li> 
  31.                           </ul> 
  32.    </td></tr></tbody></table> 
  33. </div> 
 
 
效果如圖4所示
不確定寬度的塊級元素的水平居中
圖4   不確定寬度的塊級元素的水平居中 
 
 
 
      方法一演示了有一個分頁，三個分頁和五個分頁的情況下，分頁模塊都能居中的示例。 ul標簽是整個分頁模塊的根元素，它包含的li數量不確定，所以ul本身的寬度也沒辦法確定，不能通過設置固定寬度， margin-left:auto和margin-right:auto來實現居中。這里用到了一個有趣的標簽 table來幫助實現了不確定寬度的塊級元素的水平居中，table有趣的地方在於它本身並不是塊級元素，如果不給它設定寬度的話，它的寬度由內部元素的寬度“撐起”，但即使不設定它的寬度，僅設置 margin-left:auto和margin-right:auto就可以實現水平居中！將 ul包含在table標簽內，對table設置margin-left:auto和margin-right:auto 就可以使table水平居中，間接使ul實現了水平居中。
 
    這種做法很巧妙，但缺點是增加了無語義標簽，加深了標簽的嵌套層數。
 
 
 
 
     方法二如代碼清單4所示
 
 
     代碼清單4      不確定寬度的塊級元素的水平居中方法二
  1. <style type="text/CSS"> 
  2.   ul{list-style:none;margin:0;padding:0}  
  3.   .wrap{background:#000; width:500px; height:100px}  
  4.   .test{text-align:center;padding:5px;}  
  5.   .test li{display:inline;}  
  6.   .test a{padding:2px 6px;background:#316AC5;color:#fff;
  7. border:1px solid #316AC5;text-decoration:none;}  
  8.   .test a:hover{background:#fff;color:#316AC5}  
  9. </style> 
  10. <div class="wrap"> 
  11. <ul class="test"> 
  12.           <li><a href="#">1</a></li> 
  13. </ul> 
  14. <ul class="test"> 
  15.           <li><a href="#">1</a></li> 
  16.           <li><a href="#">2</a></li> 
  17.           <li><a href-"#">3</a></li> 
  18. </ul> 
  19. <ul class="test"> 
  20.           <li><a href="#">1</a></li> 
  21.           <li><a href="#">2</a></li> 
  22.           <li><a href="#">3</a></li> 
  23.           <li><a href="#">4</a></li> 
  24.           <li><a href="#">5</a></li> 
  25. </ul> 
  26. </div> 
 
 
  效果如圖 4所示。
 
 
 
   方法二換了種思路 ，改變塊級元素的display為inline類型，然后使用text-align:center來實現居中。相較於方法一，它的好處是不用增加無語義標簽，簡化了標簽的嵌套深度，但它也存在一定問題：它將塊級元素的 display類型改為inline，變成了行內元素，而行內元素比起塊級元素缺少一些功能，比如設定長寬值，在某些特殊需求的CSS設置中，這種方法可能會帶來一些限制。
  
 
 
  方法三如代碼清單5所示
 
 
    代碼清單5      不確定寬度的塊級元素的水平居中方法三
 
  1. <style type="text/CSS"> 
  2.    ul{list-style:none; margin:0; padding:0}  
  3.    .wrap{background:#000; width:500px; height:100px}  
  4.    .test{clear:both; padding-top:5px; float:left; position:relative; left:50%;}  
  5.    .test li{float:left; display:inline; margin-right:5px; position:relative; left:-50%;}  
  6.    .test  a{float:left; width:20px; height:20px; 
  7. text-align:center; line- height:20px;   
  8. background:#316AC5;   color:#fff;   
  9. border:1px solid #316AC5; text-decoration:none;}  
  10.    .test a:hover{background:#fff; color:#316AC5}  
  11.        </style> 
  12. <div class="wrap"> 
  13.      <ul class="test"> 
  14.          <li><a href="#">1</a></li> 
  15. </ul> 
  16. <ul class="test"> 
  17.          <li><a href="#">1</a></li> 
  18.          <li><a href="#">2</a></li> 
  19.          <li><a href="#">3</a></li> 
  20. </ul> 
  21. <ul class="test"> 
  22.          <li><a href="#">1</a></li> 
  23.          <li><a href="#">2</a></li> 
  24.          <li><a href="#">3</a></li> 
  25.          <li><a href="#">4</a></li> 
  26.          <li><a href="#">5</a></li> 
  27. </ul> 
  28. </div> 
 
    效果如圖 4所示
 
 
 
    方法三通過給父元素設置 float，然后父元素設置position:relative和left:50%，子元素設置position：relative和left:-50%來實現水平居中。它可以保留塊級元素仍以display:block的形式顯示，而且不會添加無語義標簽，不增加嵌套深度，但它的缺點是設置了position:relative，帶來了一定的副作用。
 
 
 
    這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方式可以視具體情況而定。
 
 
 

    2．豎直居中

 

    (1)父元素高度不確定的文本、圖片、塊級元素的豎直居中
    父元素高度不確定的文本、圖片、塊級元素的豎直居中是通過給父容器設置相同上下邊距實現的，如代碼清單6 所示。
 
 
     代碼清單6      父元素高度不確定的文本、圖片、塊級元素的豎直居中
  1.  <style type="text/CSS"> 
  2.  .wrap{background:#000;   width:500px;   
  3. color:#fff;   margin-bottom:10px; 
  4. padding-top:20px; padding-bottom:20px}  
  5.  .test{width:200px;height:50px;background:red;}  
  6. </style> 
  7. <div class="wrap">hello world</div> 
  8. <div class="wrap"><img src="54.gif" /></div> 
  9. <div class="wrap"><div class="test"></div></div> 


 

 
效 果如圖5，圖6，圖7所示。
文本垂直居中
 圖5   文本垂直居中
 
圖片垂直居中
 圖6   圖片垂直居中
 
塊級元素垂直居中
圖7   塊級元素垂直居中
 
 
 
    (2)父元素高度確定的單行文本的豎直居中
    父元素高度確定的單行文本的豎直居中，是通過給父元素設置 line-height來實現的， line-height值和父元素的高度值相同，如代碼清單7所示。
 
 
     代碼清單7      父元素高度確定的單行文本的豎直居中 
  1. <style type-"text/CSS"> 
  2.  .wrap{background:#000;   width:500px;   color:#fff;height:100px;line- height:100px;}  
  3. </style> 
  4. <div class="wrap">hello world</div> 
 
效果如圖8 所示。
  父元素高度確定的單行文本的豎直居中

圖8     父元素高度確定的單行文本的豎直居中
 

 
    (3)父元素高度確定的多行文本、圖片、塊級元素的豎直居中
    父元素高度確定的多行文本、圖片、塊級元素的豎直居中有兩種方法。
 
 
     方法一：說到豎直居中， CSS中有一個用於豎直居中的屬性vertical-align，但只有 當父元素為 td或者th時，這個vertical-align屬性才會生效，對於其他塊級元素，例如 div、 p等，默認情況下是不支持vertical-align屬性的。在 Firefox和IE 8 下，可以設置塊級元素的 display類型為table-cell，激活vertical-align屬性，但 IE 6和IE 7並不支持display:table-cell，所以這種方法沒辦法跨瀏覽器兼容 。但我們可以使用最原始的笨方法來實現兼容——既然不支持塊級元素設置為 display:table-cell來模擬表格，那么，我們就直接使用表格好了。如代碼清單8 所示。其效果如圖5，圖6，圖7所示。
 
 
     代碼清單8     父元素高度確定的多行文本、圖片、塊級元素的豎直居中方法一
  1. <style type="text/CSS"> 
  2. .wrap{background:#000; width:500px; color:#fff;height:100px} 
  3. .test{width:200px;height:50px;background:red;}  
  4. </style> 
  5. <table><tbody><tr><td class="wrap"> 
  6. hello world<br /> 
  7. hello world<br /> 
  8. hello world  
  9. </td></tr></tbody></table> 
  10.  
  11. <table><tbody><tr><td class="wrap"> 
  12. <img src="54.gif" /> 
  13. </td></tr></tbody></table> 
  14.  
  15. <table><tbody><tr><td class="wrap"> 
  16. <div class="test"></div> 
  17. </td></tr></tbody></table> 
 
 
 
 
    因為 td標簽默認情況下就隱式地設置了vertical-align的值為 middle，所以我們不需要再顯式地設置一遍。
 
   方法一可以很好地實現豎直居中效果，且不會帶來任何樣式上的副作用，但它添加了無語義標簽，並增加了嵌套深度。
 
 
 
 
      方法二 ：對支持display：table-cell的IE 8和Firefox用display：table-cell和vertical- align:middle來實現居中，對不支持display:table-cell的IE 6和IE 7，使用特定格式的hack，如代碼清單9所示。其效果如圖5，圖6，圖7所示。


 

 
代碼清單9    父元素高度確定的多行文本、圖片、塊級元素的豎直居中方法二
  1. <style type="text/CSS"> 
  2.  .mblO{margin-bottom:10px}  
  3.  .wrap{background:#000; width:500px; color:#fff;margin-bottom:10px;height:100px;
  4. display:table-cell;vertical-align:iddle;
  5. *position:relative}  
  6.  .test{width:200px;height:50px;background:red}  
  7.  .verticalWrap{*position:absolute;*top:50%}  
  8.  .vertical{*position:relative;*top:-50%}  
  9. </style> 
  10. <div class="mblO"> 
  11.     <div class="wrap"> 
  12.           <div class="verticalWrap''> 
  13.                    <div class="vertical"> 
  14.                                   hello world<br /> 
  15.                                   hello world<br /> 
  16.                                   hello world  
  17.                    </div> 
  18.           </div> 
  19.     </div> 
  20.  </div> 
  21.  <div class="mblO"> 
  22.           <div class="wrap"> 
  23.                     <div class="verticalWrap"> 
  24.                              <img src="54.gif" class="vertical" /> 
  25.                     </div> 
  26.           </div> 
  27.  </div> 
  28.  <div class="mb10"> 
  29.           <div class="wrap"> 
  30.                     <div class="verticalWrap" > 
  31.                               <div class="test vertical"></div> 
  32.                      </div> 
  33.           </div> 
  34.  </div> 
 
    方法二 ．利用hack技術區別對待Fire fox、IE 8和IE 6、IE 7，在不支持display:table- cell的IE 6和IE 7 F，通過給父子兩層元素分別設置top:50%和top:-50%來實現居中。這種方法的好處是沒有增加額外的標簽，但它的缺點也很明顯，一方而它使用了hack．不利於維護，另一方面，它需要設置position：relative和position：absolute，帶來了副作用。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS：水平居中與垂直居中 CSS 水平居中與垂直居中 主流 CSS 布局(水平居中、垂直居中、居中 ) css圖片居中(水平居中和垂直居中) css_css 盒子水平居中 垂直居中 -水平居中、垂直居中、水平垂直居中 css樣式水平居中和垂直居中的方法 css元素水平居中和垂直居中的方式 CSS-元素水平居中、垂直居中、水平垂直居中解決方案 [css]實現垂直居中水平居中的幾種方式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM