Vertical-align：middle - img in div（不同大小的圖片）

Question

我沒有成功的CSS。應在0​​的圖片中心（不同尺寸）。看一個例子：HTML和CSS的

和實例 - http://jsfiddle.net/KJXUt/

HTML：

<div class="box"> 
    <a href="#" class="pic"> 
    <img src="http://pics.posternazakaz.ru/pnz/product/small_x2/97/61/ccc0980cde08f9032cd665f7104aca10.jpg" alt="" width="300" height="130" /> 
    </a> 
</div> 
<div class="box"> 
    <a href="#" class="pic"> 
    <img src="http://www.22.ru/ow_userfiles/plugins/photo/photo_preview_137.jpg" alt="" width="140" height="140" /> 
    </a> 
</div>​ 

CSS：

body { 
    background: #D6E8FF; 
} 
.box { 
    border: #555 1px solid; 
    margin-right: 10px; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    display: table-cell;   /* <-- problem */ 
    vertical-align: middle;  /* <-- problem */ 
} 
img { 
    max-width: 100px; 
    height: auto; 
} 

如何正確的樣式？請幫助。在此先感謝

Answer 1

術語做出圖片，而不會再調整它被稱爲「裁剪」，直接實現你的答案，一個不同的CSS屬性：background將被使用。該div將被刪除。 @Heliio's method很棒，如果你需要<div>標籤。

的代碼示例如下 HTML：

<a href="#" class="pic pic1"> 
&nbsp; 
</a> 

CSS：

.pic { 
    display:inline-block; 
    border: #555 1px solid; 
    margin-right: 10px; 
    width: 100px; 
    height: 100px; 
} 

.pic1{ 
background: transparent url(http://mw2.google.com/mw-panoramio/photos/medium/62256112.jpg) -20px -200px no-repeat; 
} 

注意的是，CSS有一些負面的價值觀，這些是非常繁瑣的修改，但它實際上只是-((imagewidth-100)/2) x -((imageheight-100)/2)

http://jsfiddle.net/KJXUt/9/

Answer 2

這是一個簡單的技術中心垂直圖像中.box

http://codepen.io/AntonNiklasson/pen/pkaov

要添加更多框旁邊的海誓山盟，加float: left到.box

Answer 3

當您使用顯示：表-細胞;它迫使固定大小的細胞。也許這不是一個好的解決方案。

我不明白，如果想真的，但：

body { 
    background: #D6E8FF; 
} 
.box { 
    border: #555 1px solid; 
    float:left; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 
img { 
    max-width: 100px; 
} 

這裏舉例：http://jsfiddle.net/KJXUt/1/

或者，如果喜歡：http://jsfiddle.net/KJXUt/3/