css table-cell實現圖文排列水平對齊

今天遇到一個樣式：圖文兩列排列。

由於圖片大小固定，於是就想到了用table-cell實現。

<div class="container">
　　<div class="box"><img src="demo.png" /></div>
　　<div class="box">
　　　　<p>今天是周四</p>
　　　　<p>今天是9月伊始</p>
　　　　<p>今天是2016年的下半年</p>
　　</div>
</div>

最初css代碼如下：

.container{display:table;}
.box{display:table-cell}

但是如果只是簡單的這樣寫，你會發現圖片和問題不在同一個水平線上。

可以設置css的行內元素的垂直對齊屬性

.box{vertical-align: top;}

設置top是垂直上對齊

　　middle是垂直居中

其他的以此類推