網格垂直對齊圖像（CSS）

Question

我一直在搞這個一陣子，我的客戶堅持要通過CSS手動設置圖像的位置並不是一個可以接受的解決方案。基本上我試圖垂直居中父DIV（它有一個靜態高度）的圖像。

我正在考慮通過PHP計算圖像大小，然後爲每個圖像設置CSS規則，但想象這會讓它複雜化。

有人請看看demo here並提供可能的解決方案嗎？

謝謝！

Answer 1

你並不需要在這裏計算的東西，CSS擁有一切的解決方案，關鍵是要使用display: table-cell;與vertical-align: middle;

CSS

div { 
    display: table-cell; 
    height: 300px; 
    border: 1px solid green; 
    display: table-cell; 
    vertical-align: middle; 
} 

Demo

Answer 2

這是一個情況下， <table>元素。這可以說是表格數據。

當你這樣做，你可以給表格單元格vertical-align：

table td { vertical-align: middle; }