你可以使用display：table-cell並且有一個固定的寬度/高度嗎？

Question

我有以下幾點：

CSS：

.photo { 
    overflow: hidden; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
} 

HAML

.photo 
    %img{:src => my_url} 

見的jsfiddle here。我用來演示的圖像是150像素×80像素。

我需要在.photo div內顯示圖像並剪掉任何多餘部分。圖像需要垂直和水平居中。但是，display:table-cell會導致.photo div忽略我的寬度和高度設置。我怎樣才能解決這個問題？

Answer 1

table-cell不是垂直對齊的唯一解決方案。

.photo { 
    overflow: hidden; 
    background: #c0c0c0; 
    display:inline-block; /* or float:left; */ 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    line-height:97px; 
} 
.photo img { 
    vertical-align:middle; 
    max-width:100%; 
    max-height:100%; 
} 

Answer 2

如果你把內部div它似乎工作。不知道爲什麼您首先需要display:table-cell？

http://jsfiddle.net/locrizak/5tawU/

而且，你有沒有考慮只是把寬度圖像上？這會導致圖像的高度也相應地調整大小。

Answer 3

您可以使用display: table-cell但家長需要有display: table-row和該行的母公司應該有display: table;