我已經沉浸在週末前一天的愉快氛圍裡無法自拔。

1、簡介

今天來學習一下display的一個值，table-cell

W3C上面關於這個屬性值的解釋 是它會作為一個表格單元格顯示（類似td和th）

ie相容性：支援到ie8+

注意：table-cell 在使用的時候容易被其他一些css屬性所影響，對元素的高度寬度非常敏感，margin值對其不起作用，但是可以設定其padding值。

2、功能

（1）display:table-cell與大小不固定元素的垂直居中

~~~~~~~~

對於兩個寬度和高度不同的圖片，我想達到的效果是

 	<div>
    	   <a href="http://placehold.it"><img src="http://placehold.it/150X150"></a>
 	</div>
  	<div>
   	   <a href="http://placehold.it"><img src="http://placehold.it/150X100"></a>
 	</div>

一開始效果如下：

我來改造一下，通過給外層div加style樣式，具體css程式碼如下：

      div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }

      div img {
        vertical-align: middle;
      }
 

<div class="main">
    	   <a href="http://placehold.it"><img src="http://placehold.it/150X150"></a>
    	 <div class="text">
      	   <p><b>宋dong野</b> 歌手一枚</p>
      	   <p>歌名：安和橋</p>
     	   <p>歌詞：我知道那些夏天就想青春一樣回不來，代替夢想的，也只是滿懷期待；我知道吹過的牛逼也會隨青春一笑了之，而我困在城市裡，懷念你。我知道那些夏天就想青春一樣回不來，代替夢想的，也只是滿懷期待；我知道吹過的牛逼也會隨青春一笑了之，而我困在城市裡，懷念你。</p>
   	 </div>
	</div>
 

 .main {
    width: 60%;
     margin: 60px auto 0;
     padding: 20px;
     background: yellow;
     display: table;
  }

  .main img {
     margin-right: 21px;
  }

  .text {
     display: table-cell;
     *display: inline-block;
  }

  .main:after,
  .main:before {
     display: table;
     content: "";
     clear: both;
  }

 	<div class="wrap">
    	  <div class="main">
      	 	<div>迷路的鴿子呀，它在雙手合十的晚上，渴望一雙翅膀，飛去南方，南方。明天冰雪封山的時候 我也光著雙腳，站在你翻山越嶺的盡頭，正當年少，兩千個祕密 沒人知道，請你在春天到來的時候 輕輕歌唱，唱一首關於冬天的歌謠 漫漫長長</div>
      	 	<div>借我十年，借我網名天涯的勇敢。借我說得出口的淡淡誓言，　借我孤絕如初見,借我不懼碾壓的鮮活,借我生猛與莽撞不問明天,借我一束光照亮黯淡,借我笑顏燦爛如春天,借我殺死庸碌的情懷,借我縱容的悲愴與哭喊,借我怦然心動如往昔, 借我安適的清晨與傍晚</div>
      	 	<div>誰說月亮上不曾有青草, 誰說可可西里沒有海, 誰說太平洋底燃不起篝火, 誰說世界盡頭沒人聽我唱歌, 誰說戈壁灘不曾有燈塔, 誰說可可西里沒有海, 誰說拉拇拉措吻不到沙漠, 誰說我的目光流淌不成河</div>
   	  </div>
  	 </div>

 .main {
     display: table;
  }

  .main div {
     width: 250px;
      height: 300px;
      display: table-cell;
      padding: 1.6%;
  }

  .main div:nth-child(1) {
      background: red
  }

  .main div:nth-child(2) {
    background: green
  }

  .main div:nth-child(3) {
    background: yellow
  }