CSS教學-利用CSS中的table屬性,讓多個div等高與區塊內元素垂直居中

梅問題-CSS教學-css原生table屬性讓多個div等高與垂直居中
  身旁有許多從事網頁設計的朋友,時常問到梅干一個問題,就是早期用table排版時,完全不用考慮td等高的問題,但當改用div進行排版時,就會遇到,二個或多個div時,就會各自依內容長高,且也無法垂直居中,這應該是許多人的困擾,而之前為了讓二個div等高,梅干還特別用了jQuery,來抓div的最大值,將要等高的div值動態寫入,其實會這麼麻煩,一切都是因為IE6.0的緣故,由於IE對於CSS支援度差,使得一下這不行用,那不行用的,把一件簡單的事變的很麻煩。
  其實在CSS2中,就有一個table的顯示屬性可用,將div直接模擬成table來使用,就可實現多個div等高外,還可讓div內的元件垂直居中,完全不用寫任何的程式碼,就可作到等高與居中的問題,隨著IE6.0已漸漸的消失後,再加上IE8.0、IE9.0已成為目前的主流後,終於在這些的版本中,支援了table屬性,因此現在就可放心的使用,這個table屬性,輕鬆實現多個div等高與垂直居中的美夢啦!
css-table 屬性:
display:table => table
display:table-row => tr
display:table-cell => td ,th
支援瀏覽器:IE8.0、Firefox、Safari、Chrome、Oprea

多個div等高: css:
/* table */
.table {  
  display: table; 
  border-collapse: collapse; 
}  

/* tr */
.row{
	display: table-row; border:solid 1px red;
}

/* td , th */
.cell1 {  
  display: table-cell; 
  width: 180px; 
  border-right: 1px dotted #fff; 
  background:#fcd6d6;
}  
  
.cell2 {  
  display: table-cell; 
  width: 180px; 
  padding-left: 10px; 
  border-right: 1px dotted #fff; 
  background:#eff8ff;
}  
  
.cell3 {  
  display: table-cell; 
  width: 180px; 
  padding-left: 10px; 
  background:#effff0;
}

html:
 <div class="table"><!-- table -->
 	<div class="row"><!-- tr --> 
         <div class="cell1"><!-- td -->  
            table-cell內容1<br />
            table-cell內容1<br />
            table-cell內容1<br />
            table-cell內容1<br /><br />      
         </div> 
         <div class="cell2"> 
               table-cell內容2<br>
               table-cell內容2
         </div> 
         <div class="cell3"> 
               table-cell內容3
         </div> 
     </div>   
 </div> 
結果預覽:
梅問題-CSS教學-css原生table屬性讓多個div等高與垂直居中
垂直居中: css:
.table-wrap {display:table; width:300px; height:300px; border:solid 1px #ccc; }
.table-cell {display:table-cell; vertical-align:middle; text-align:center;}

html
<div class="table-wrap">
    <div class="table-cell">
        <div class="content">
           內容置中
        </div>
    </div>
</div>

結果預覽:
梅問題-CSS教學-css原生table屬性讓多個div等高與垂直居中
[範例預覽]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    kevin 說道:

    請問一下大大 為什麼插入圖案之後表格就變形了 插入再cell1裡面 cell2跟cell3 就跑到下面去 我要怎麼讓他保持對齊~~~

    回應:
    你是要讓放在裡面的圖片居中嗎?